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>

打印页面