<display-internal> - CSS | MDN

語法

有效的 <display-internal> 值

table-row-group: 這些元素的行為類似於 <tbody> HTML 元素。
table-header-group: 這些元素的行為類似於 <thead> HTML 元素。
table-footer-group: 這些元素的行為類似於 <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-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

另見

display

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者在 2025 年 7 月 14 日修改。

在 GitHub 上檢視此頁面 • 報告此內容存在的問題