display: таблица в div не отображается как таблица

Question

http://img580.imageshack.us/img580/1811/sinttulooh.png

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

Я неЗнайте, почему он так себя ведет, потому что в остальной части CSS нет конфликта с каким-либо другим правилом.И я видел в других примерах, что нет необходимости определять столбец таблицы или строку таблицы, чтобы получить этот стиль.

Как мне объявить div, чтобы получить желаемую структуру?

Вот код: http://jsfiddle.net/3fMM3/2/

Answer 1

Вот рабочий пример: http://jsfiddle.net/NyqGQ/1/

Обратите внимание на свойство border-collapse для объединения границы контейнера и дочернего элемента.

Answer 2

Попробуйте установить свойство вертикального выравнивания top в ячейках таблицы.

.your-table-cells
{
    vertical-align:top;
}

Answer 3

Вам не нужны там таблицы, а также вам не нужно создавать отображение на месте: table.

Просто используйте стили CSS для создания трехколоночного макета, это то, что вы хотите достичь.

Проверьте эту ссылку, например:

http://matthewjamestaylor.com/blog/perfect-3-column.htm