<display-internal>
某些布局模型(如table
和ruby
)具有复杂的内部结构,其子元素和后代可以填充多个不同的角色。此页面定义了这些仅在特定布局模式下才有意义的“内部”显示值。
语法
有效的<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 元素。 -
这些元素的行为类似于
<caption>
HTML 元素。 ruby-base
-
这些元素的行为类似于
<rb>
HTML 元素。 ruby-text
-
这些元素的行为类似于
<rt>
HTML 元素。 ruby-base-container
-
这些元素生成匿名盒子。
ruby-text-container
-
这些元素的行为类似于
<rtc>
HTML 元素。
正式语法
示例
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;
}
结果
规范
未找到规范
未找到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 的浏览器中加载。
css.properties.display.table-footer-group
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 的浏览器中加载。