Тип CSS `<display-internal>`

Некоторые модели макета, такие как table и ruby, имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их дочерние элементы и потомки. На этой странице описаны эти «внутренние» значения display, которые имеют смысл только в соответствующем режиме макета.

Синтаксис

Допустимые значения <display-internal>:

table-row-group

Эти элементы ведут себя как HTML-элементы <tbody>.

table-header-group

Эти элементы ведут себя как HTML-элементы <thead>.

table-footer-group

Эти элементы ведут себя как HTML-элементы <tfoot>.

table-row

Эти элементы ведут себя как HTML-элементы <tr>.

table-cell

Эти элементы ведут себя как HTML-элементы <td>.

table-column-group

Эти элементы ведут себя как HTML-элементы <colgroup>.

table-column

Эти элементы ведут себя как HTML-элементы <col>.

table-caption

Эти элементы ведут себя как HTML-элементы <caption>.

ruby-base

Эти элементы ведут себя как HTML-элементы <rb>.

ruby-text

Эти элементы ведут себя как HTML-элементы <rt>.

ruby-base-container

Для этих элементов создаются анонимные блоки.

ruby-text-container

Эти элементы ведут себя как HTML-элементы <rtc>.

Формальный синтаксис

<display-internal> = 
  table-row-group |
  table-header-group |
  table-footer-group |
  table-row |
  table-cell |
  table-column-group |
  table-column |
  table-caption |
  ruby-base |
  ruby-text |
  ruby-base-container |
  ruby-text-container

Примеры

Пример таблиц CSS

В следующем примере показано создание формы с помощью табличной модели макета CSS.

HTML

<main>
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
  </div>
  <div>
    <label for="age">Age</label>
    <input type="text" id="age" name="age" />
  </div>
</main>

CSS

main {
  display: table;
}

div {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin: 5px;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• display
  • <display-outside>
  • <display-inside>
  • <display-listitem>
  • <display-box>
  • <display-legacy>