CSS 数据类型 - display-internal_CSS 菜鸟教程

像 table 和 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>

<< CSS 数据类型 - display-outside CSS 数据类型 - dimension >>