<display-internal>

某些布局模型(如tableruby)具有复杂的内部结构,其子元素和后代可以填充多个不同的角色。此页面定义了这些仅在特定布局模式下才有意义的“内部”显示值。

语法

有效的<display-internal>

table-row-group

这些元素的行为类似于<tbody> HTML 元素。

table-header-group

这些元素的行为类似于<thead> HTML 元素。

这些元素的行为类似于<tfoot> HTML 元素。

table-row

这些元素的行为类似于<tr> HTML 元素。

table-cell

这些元素的行为类似于<td> HTML 元素。

table-column-group

这些元素的行为类似于<colgroup> HTML 元素。

table-column

这些元素的行为类似于<col> HTML 元素。

table-caption

这些元素的行为类似于<caption> HTML 元素。

ruby-base

这些元素的行为类似于<rb> HTML 元素。

ruby-text

这些元素的行为类似于<rt> HTML 元素。

ruby-base-container

这些元素生成匿名盒子。

ruby-text-container

这些元素的行为类似于<rtc> HTML 元素。

正式语法

<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

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

css
main {
  display: table;
}

div {
  display: table-row;
}

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

结果

规范

未找到规范

未找到css.properties.display.table-row-group,css.properties.display.table-header-group,css.properties.display.table-footer-group,css.properties.display.table-row,css.properties.display.table-cell,css.properties.display.table-column-group,css.properties.display.table-column,css.properties.display.table-caption,css.properties.display.ruby-base,css.properties.display.ruby-text,css.properties.display.ruby-base-container,css.properties.display.ruby-text-container的规范数据。
检查此页面是否存在问题或为其贡献缺少的spec_url mdn/browser-compat-data。还要确保规范包含在 w3c/browser-specs.

浏览器兼容性

css.properties.display.table-row-group

BCD 表格仅在启用 JavaScript 的浏览器中加载。

css.properties.display.table-header-group

BCD 表格仅在启用 JavaScript 的浏览器中加载。

BCD 表格仅在启用 JavaScript 的浏览器中加载。

css.properties.display.table-row

BCD 表格仅在启用 JavaScript 的浏览器中加载。

css.properties.display.table-cell

BCD 表格仅在启用 JavaScript 的浏览器中加载。

css.properties.display.table-column-group

BCD 表格仅在启用 JavaScript 的浏览器中加载。

css.properties.display.table-column

BCD 表格仅在启用 JavaScript 的浏览器中加载。

css.properties.display.table-caption

BCD 表格仅在启用 JavaScript 的浏览器中加载。

css.properties.display.ruby-base

BCD 表格仅在启用 JavaScript 的浏览器中加载。

css.properties.display.ruby-text

BCD 表格仅在启用 JavaScript 的浏览器中加载。

css.properties.display.ruby-base-container

BCD 表格仅在启用 JavaScript 的浏览器中加载。

css.properties.display.ruby-text-container

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅