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

Следующий элемент таблицы в 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>

Обновление0

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


html css css-tables
person Matt Joiner    schedule 08.03.2010    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Я смог это исправить, добавив vertical-align:top; к стилю '#left'.

Вы должны обернуть display: table-cell div в другой div с display:table-row

person Ray    schedule 08.03.2010
comment
Ха!! Большое спасибо. Так заканчивается примерно 3 часа извлечения этого маленького зла с помощью Firebug. - person Matt Joiner; 08.03.2010

arrow_upward
0
arrow_downward

Я бы предположил, что у вас есть набор margin-top на <table>. Посмотрите в Firebug.

table {
margin-top: 0;
}

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

person Adam Hopkinson    schedule 08.03.2010
comment
Нет, я уже поковырялся с firebug. Это странная проблема макета, и поля не имеют к этому никакого отношения (насколько мне известно). Я уже пробовал так, как вы предложили. - person Matt Joiner; 08.03.2010