css display table caption

Свойство CSS display используется для изменения типа HTML-элемента — блочный (block), встроенный (inline), элемент списка и так далее. Также надо понимать, что применение свойства display не дает права пренебрегать синтаксисом HTML, например, элемент

в любом случае не может содержать блочные теги, даже если к ним применен display: inline .

Содержание

Тип свойства
Значения
Синтаксис
Таблица — сетка
1 Answer 1

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства CSS display является одно из ключевых слов, задающих тип элемента. К сожалению, полностью поддерживаются всеми браузерами только значения, которые появились еще в CSS 1.

Значения свойства display их описание и поддержка браузерами

Значение	Описание	Поддержка
inline	Элемент ведет себя, как встроенный, то есть не создает до и после себя перевод строк в начало.	Всеми браузерами
block	Применение данного значения преобразует элемент в блочный, то есть он создает до и после себя перевод строк в начало. При добавлении значения block к тегам , Internet Explorer 6.0 и 7.0 не убирают у них маркеры, то есть действуют так, как будто это значение list-item.	IE 6.0 и 7.0
block		Остальные браузеры
inline-block	Элемент становится блочным, например, у него можно изменять ширину и высоту. Но окружающие элементы воспринимают его как встроенный, то есть он не создает до и после себя переноса строк. Internet Explorer 6.0 и 7.0 выравнивают низ элемента по базовой линии строки, на которой он находится, а все остальные браузеры базовую линию последней строки элемента. Кроме этого, IE 6.0 и 7.0 не поддерживает это значение для блочных элементов и тех, которые ведут себя, как блоки (например, элементы списков).	IE 6.0 и 7.0
		Firefox 2.0
		Остальные браузеры
list-item	Элемент преобразуется в блочный, но со свойствами элемента списка (тег ) к которому можно применить, например, list-style-type. И если их на странице присутствует несколько, то они являются элементами одного списка.	Всеми браузерами
none	Элемент не отображается на странице и никаким образом не влияет на ее форматирование — другие элементы ведут себя так, будто его нет совсем. Это же свойство наследуется всеми потомками элемента, причем его нельзя изменить применив к ним display .	Всеми браузерами
run-in	Элемент становится блочным или встроенным в зависимости от его местонахождения в HTML-коде по следующим правилам: Если элемент run-in содержит блочный элемент, то он тоже становится блочным. Если элемент run-in указан перед блочным элементом, который не является абсолютно позиционированным или всплывающим. То элемент run-in становится первым встроенным элементом данного блочного элемента. В противном случае элемент run-in становится блочным.	IE 6.0 и 7.0
		Firefox 2.0 и выше
		Остальные браузеры
table	Создание блочного элемента определяющего таблицу, подобно тегу .	IE 6.0 и 7.0
table		Остальные браузеры
inline-table	Создание встроенного элемента определяющего таблицу, которая не создает переносы строк, а располагается на одной строке с другими инлайн-элементами. Браузеры, которые поддерживают inline-table совершенно по-разному выравнивают встроенную таблицу относительно строки, на которой она находится: одни совмещают базовую линию строки и низ таблицы, другие — верх, третьи — базовую линию первой строки таблицы.	IE 6.0 и 7.0
		Firefox 2.0
		Остальные браузеры
table-caption	Элемент используется для создания заголовка HTML-таблицы, аналог тега .	IE 6.0 и 7.0
table-caption		Остальные браузеры
table-column-group	Элемент для группирования одного или нескольких столбцов таблицы, как тег .	IE 6.0 и 7.0
table-column-group		Остальные браузеры
table-column	Элемент, определяющий столбец таблицы, как тег .	IE 6.0 и 7.0
table-column	Элемент, определяющий столбец таблицы, как тег .	Остальные браузеры
table-header-group	Элемент, предназначен для создания «шапки» таблицы, аналог тега . Причем на него распространяются те же правила: должен указываться перед элементами определяющими тело и футер таблицы, но после заголовка и элементов группирования столбцов. Если в таблице присутствует несколько элементов с display: table-header-group , то только первый станет шапкой, остальные будут отнесены к телу таблицы.	IE 6.0 и 7.0
table-header-group		Остальные браузеры
table-footer-group	Элемент, предназначен для создания футера таблицы, аналог тега . Должен указываться перед ее телом, но после «шапки». Если в таблице присутствует несколько элементов с display: table-footer-group , то только первый станет футером, остальные будут отнесены к телу таблицы.	IE 6.0 и 7.0
table-footer-group		Остальные браузеры
table-row-group	Создание элемента предназначенного для создания тела таблицы, аналог тега .	IE 6.0 и 7.0
table-row-group		Остальные браузеры
table-row	Элемент для создания ряда (строки) таблицы, аналог тега .	IE 6.0 и 7.0
table-row	Элемент для создания ряда (строки) таблицы, аналог тега .	Остальные браузеры
table-cell	Элемент используется для создания ячейки таблицы, аналог тега .	IE 6.0 и 7.0
table-cell		Остальные браузеры
inherit	Наследует значение свойства CSS display от родительского элемента.	IE 6.0 и 7.0
inherit		Остальные браузеры

Процентная запись: не существует.

Значение по умолчанию: inline.

Синтаксис

Пример CSS: использование display

Результат. Использование свойства CSS display.

CSS-свойство display: table и другие, делают вывод группы элементов подобно таблице

, но с ограничением – объединения ячеек colspan и rowspan не поддерживаются.

Полный список свойств и тегов, которые они заменяют:

1 Answer 1

Here is what the spec says about display: table-caption :

table-caption (In HTML: CAPTION)

Specifies a caption for the table. All elements with ‘display: table-caption’ must be rendered, as described in section 17.4.

And here is what the section 17.4 says about rendering of caption boxes:

The caption boxes are block-level boxes that retain their own content, padding, margin, and border areas, and are rendered as normal block boxes inside the table wrapper box.

The key part is that they are rendered as normal block boxes and hence each of them is displayed one below the other (as in, in their own row).

Other points to note: (A summary of my discussion with GCyrillus in comments)

Parent container with display: table is not required for a child to have display: table-cell or display: table-caption . You can find more details and reference to the relevant part of the spec in this SO thread
There should ideally be only one caption per table. User Agents probably don’t expect multiple captions to be provided under the same parent/table and it probably explains why Firefox renders it differently from Chrome. But details on that are beyond the scope of this answer (in my opinion) as the question only asks why display: table-caption causes vertical layout.
I concur with GCyrillus, it is definitely bad practice to use display: table-caption on multiple elements under the same parent. I believe you were doing trial and error in an attempt to learn.

display: table;

display: inline-table;

но с display: inline-block

display: table-caption;
display: table-column-group;
display: table-column;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-cell;		или

Таблица — сетка

Часто табличная верстка используется в качестве сеточной разметки, хотя это семантически неправильно и возникнут проблемы у мобильной или адаптивной версии. Для сеток специально ввели CSS Gr >display: table .

Рассмотрим пример – сетка 3×2 в три колонки сделанная таблицей:

Now when I change table-caption to table-cell it renders horizontally. Below is the demo of it.

Any reason for the different renderings?

.. what? table-caption renders it like a element (which is displayed vertically). table-cell is like a

element (which is displayed horizontally). – MortenMoulder Mar 12 ’16 at 13:14