兩種類型的表格布局
你有兩種方式使用表格布局 -HTML Table（<table>標簽）和CSS Table（display:table 等相關屬性）。
HTML Table是指使用原生的<table>標簽，而CSS Table是指用CSS屬性模仿HTML 表格的模型。
在W3C關於<table>相關標簽的文檔中我們可以找到，HTML 4中<table>相關標簽的默認樣式表：
js 代碼:
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
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>