Элемент таблицы в ячейке таблицы CSS смещает другое содержимое ячейки таблицы - PullRequest
Новая
       169

Элемент таблицы в ячейке таблицы CSS смещает другое содержимое ячейки таблицы

4 голосов
/ 08 марта 2010

Следующий элемент таблицы в div "center" приводит к смещению содержимого в div "left" на несколько пикселей от вершины (8 в моем браузере). Добавление некоторого текста перед таблицей устраняет это смещение.

Почему? Как я могу предотвратить это, не требуя "фиктивной" строки текста перед моей таблицей? 

<html>
<head>
    <style type="text/css">
        #left {
            display: table-cell;
            background-color: blue;
        }
        #menu {
            background-color: green;
        }
        #center {
            background-color: red;
            display: table-cell;
        }
    </style>
<body>
    <div id="left">
        <div id="menu">
            Menu 1<br>
            Menu 2<br>
        </div>
    </div>
    <div id="center">
        <table><tr><td>This is the main contents.</tr></td></table>
    </div>
    <div id="left">
        <div id="menu">
            Menu 1<br>
            Menu 2<br>
        </div>
    </div>
</body>
</html>

Update0

Обратите внимание, что при использовании чисел с плавающей точкой я не могу получить столбец по центру , расширяющийся до его содержимого. Источник, из которого я извлек этот пример, использует display: table; margin-left: auto; margin-right: auto; для центрирования всего тела.

Ответы [ 2 ]

4 голосов
/ 08 марта 2010

Мне удалось это исправить, добавив vertical-align:top; к стилю '#left'.

Вы должны заключить display: table-cell div в другой div с display:table-row

0 голосов
/ 08 марта 2010

В некотором смысле я бы сказал, что у вас есть margin-top, установленный на <table>. Загляни в Firebug. 

table {
margin-top: 0;
}

Какую-то конкретную причину, по которой вы это делаете? Вы можете перемещать div и делать расширенные макеты, не устанавливая display: table-cell. Кроме того, таблицы должны использоваться только для табличных данных.

...