table中，表頭固定，body滾動的方式。也就是使用：css Table佈局-display:table

時間 2019-11-08

標籤 table 表頭固定 body 滾動方式也就是使用 css 佈局 display 欄目 CSS 简体版

原文原文鏈接

兩種類型的表格佈局

你有兩種方式使用表格佈局 -HTML Table（<table>標籤）和CSS Table（display:table 等相關屬性）。css

HTML Table是指使用原生的<table>標籤，而CSS Table是指用CSS屬性模仿HTML 表格的模型。html

js 代碼:app

table { display: table }佈局

tr { display: table-row }ui

thead { display: table-header-group }spa

tbody { display: table-row-group }code

tfoot { display: table-footer-group }htm

col { display: table-column }對象

colgroup { display: table-column-group }

td, th { display: table-cell }

caption { display: table-caption }

顯而易見HTML Table使用標籤<table>、<tr>、<td>等標籤，就是使用CSS Table的相關屬性來實現的。從上面HTML4的默認樣式表中能夠看出他們的使用對於CSS屬性的狀況：

table：指定對象做爲塊元素級的表格。類同於html標籤<table>（CSS2）
inline-table：指定對象做爲內聯元素級的表格。類同於html標籤<table>（CSS2）
table-caption：指定對象做爲表格標題。類同於html標籤<caption>（CSS2）
table-cell：指定對象做爲表格單元格。類同於html標籤<td>（CSS2）
table-row：指定對象做爲表格行。類同於html標籤<tr>（CSS2）
table-row-group：指定對象做爲表格行組。類同於html標籤<tbody>（CSS2）
table-column：指定對象做爲表格列。類同於html標籤<col>（CSS2）
table-column-group：指定對象做爲表格列組顯示。類同於html標籤<colgroup>（CSS2）
table-header-group：指定對象做爲表格標題組。類同於html標籤<thead>（CSS2）
table-footer-group：指定對象做爲表格腳註組。類同於html標籤<tfoot>（CSS2）
下面是一些 display:table 示例，你可能會發現它頗有用：
· 動態垂直居中對齊


Html:
<button>添加多行</button>

<div class="box">
    <p>Double Line</p>
    <p>Double Line</p>
</div>


LESS
body {
  color: @beige;
  background: @green;
  display: table;
  width: 100%;
  height: 100%;
}

.box {
  display:table-cell;
  vertical-align: middle;
  text-align: center;
}

/*====== Ignore section below ======*/

@orange: #BD4932;
@yellow: #FFD34E;
@green: #105B63;
@beige: #FFFAD5;


/* Basic Style*/
* { margin:0; padding:0;}
html, body { height: 100%; }
button { padding: 5px 10px;position:absolute;bottom: 20px;left:20px;display: block; -webkit-appearance: none;background: @orange; outline: none;  border: 2px solid #DB9E36; color: @yellow; border-radius: 10px; box-shadow: 0 2px 3px rgba(0,0,0,0.5);cursor: pointer;}
button:active {border-color: @beige; color:@beige;}


JS
document.querySelector("button").addEventListener("click", function(){
    var element = document.createElement("p");
    element.innerText = "額外添加的行";
  document.querySelector(".box").appendChild(element);

這也許是使用display:table最多見的例子了。對於動態高度的元素，有了它，就能夠實現真正的垂直（居中）對齊。

還有另外一個不用display:table實現的垂直居中的簡單方式，您可能感興趣：

table表格，讓thead固定，tbody有滾動條，關鍵是都對齊的純css寫法

找了很久才找到一篇能夠簡單粗暴就能用的，因此拿過來算是收藏了。裏面有一個css2裏的命令是我沒用過的也是這裏面關鍵的：table-layout:fixed;

原理很簡單，有愛研究的童鞋能夠去css官網看看說明文檔。

直接貼代碼：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>轉載自·威易網CSS教程</title>
<style>
table tbody {
display:block;
height:195px;
overflow-y:scroll;
}
table thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
table thead {
width: calc( 100% - 1em )
}
table thead th{ background:#ccc;}
</style>
</head>
<body>
<table width="80%" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>出生年月</th>
<th>手機號碼</th>
<th>單位</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張三封</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴與四十大盜</td>
</tr>
<tr>
<td>張小三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>騰訊科技</td>
</tr>
<tr>
<td>張三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>瀏陽河就業</td>
</tr>
<tr>
<td>張三瘋子</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張大三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張三五</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張劉三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
</tbody>
</table>
</body>
</html>