CSS 資料型別 - <display-internal>

像表格和ruby這樣的佈局模型包含一個複雜的內部結構。本章指定了內部顯示值，這些值僅與該特定佈局模型相關。

可能的值

資料型別<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 元素。

語法

<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption

CSS <display-internal> - 表格

以下示例演示了 CSS 表格佈局顯示，以及諸如table-header-group、table-footer-group、table-row、table-cell之類的顯示值。

<html>
<head>
<style> 
   main {
      display: table;
   }

   #t-row {
      display: table-row;
   }

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

   #t-header-gp {
      display: table-header-group;
      text-align: center;
      background-color: aqua;
      margin-bottom: 10px;
   }

   #t-footer-gp {
      display: table-footer-group;
      background-color: peachpuff;
      margin-top: 10px;
   }
</style>
</head>
<body>
   <h1>Table Layout</h1>
   <div id="t-header-gp">Table Header</div>
   <main>
      <div id="t-row">
         <label for="name">Label1</label>
         <input type="text" id="name" name="name" />
      </div>
      <div id="t-row">
         <label for="age">Label2</label>
         <input type="text" id="age" name="age" />
      </div>
      <div id="t-row">
         <label for="age">Label3</label>
         <input type="text" id="age" name="age" />
      </div>
      </main>
      <div id="t-footer-gp">Table Footer</div>
</body>
</html>

列印頁面