<display-internal>

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

Some layout models such as table and ruby have a complex internal structure, with several different roles that their children and descendants can fill. This page defines those "internal" display values, which only have meaning within that particular layout mode.

句法

Valid <display-internal> values:

table-row-group: These elements behave like <tbody> HTML elements.
table-header-group: These elements behave like <thead> HTML elements.
table-footer-group: These elements behave like <tfoot> HTML elements.
table-row: These elements behave like <tr> HTML elements.
table-cell: These elements behave like <td> HTML elements.
table-column-group: These elements behave like <colgroup> HTML elements.
table-column: These elements behave like <col> HTML elements.
table-caption: These elements behave like <caption> HTML elements.
ruby-base: These elements behave like <rb> HTML elements.
ruby-text: These elements behave like <rt> HTML elements.
ruby-base-container: These elements behave like <rbc> HTML elements generated as anonymous boxes.
ruby-text-container: These elements behave like <rtc> HTML elements.

范例

CSS tables example

The following example demonstrates laying out a simple form using CSS table layout.

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 Display Module Level 3 The definition of 'display-internal' in that specification.	候选推荐

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Support of table values

table , table-cell , table-column , table-column-group , table-footer-group , table-header-group , table-row ，和 table-row-group

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`table` , `table-cell` , `table-column` , `table-column-group` , `table-footer-group` , `table-header-group` , `table-row` ，和 `table-row-group`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 8	Opera 完整支持 7	Safari 完整支持 1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

图例

完整支持

Support of ruby values

ruby , ruby-base , ruby-base-container , ruby-text ，和 ruby-text-container