Использование display: table-cell без таблицы-строки

Недавно я заметил, что можно использовать display: table-cell; для элемента без его окружения с помощью элемента display: table-row;

Пример (работает в IE, Chrome, FF, Safari, Opera):

<div style="display: table;">
    <div style="display: table-cell;">
        Text
    </div>
</div>

Является ли это плохой стиль? Должна ли табличная ячейка окружать столбец или нет необходимости?

Ответ 1

Нет. Его не нужно использовать с display: table-row. Прочитайте здесь.

table-cell просто представляет a <td> или <th>:

Указывает, что элемент представляет ячейку таблицы.

И особенно в отношении table-cell:

Например, изображение, установленное на "display: table-cell", будет заполнено доступное пространство ячеек и его размеры могут алгоритмы калибровки таблицы, как с обычной ячейкой.

Ответ 2

Из Все, что вы знаете о CSS, неверно:

Анонимные элементы таблицы

Таблицы CSS с удовольствием соблюдают обычные правила компоновки таблиц, которые позволяет чрезвычайно мощную функцию раскладки таблиц CSS: отсутствует Элементы таблицы создаются анонимно браузером. CSS2.1 спецификация заявляет:

Языки документа, отличные от HTML, могут не содержать всех элементов в табличной модели CSS 2.1. В этих случаях "отсутствующие" элементы должны быть приняты для того, чтобы модель таблицы работала. Любая таблица элемент автоматически генерирует необходимые анонимные объекты таблицы вокруг себя, состоящий из по меньшей мере трех вложенных объектов соответствующий элементу "table" / "inline-table", "таблица-строка", элемент и элемент "table-cell".

Это означает, что если мы будем использовать display: table-cell; без первого содержащий ячейку в блоке, установленном в display: table-row;, строка будет подразумеваться - браузер будет действовать так, как если бы объявленная строка была на самом деле там.

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

Примечание:

Тот факт, что он создает допустимый CSS, не означает, что поведение display:table-cell без display:table-row или display:table-row является стабильным. Даже сегодня (февраль 2016 года) поведение анонимных элементов таблицы остается непоследовательным в браузерах. Подробнее см. Непоследовательное поведение дисплея: таблица и отображение: table-cell.