display:table的幾個妙用：垂直居中、浮動……
阿新 • • 發佈：2019-02-06
一、為什麼不用table系表格元素？
目前，在大多數開發環境中，已經基本不用table元素來做網頁佈局了，取而代之的是div+css，那麼為什麼不用table系表格元素呢？
1、用DIV+CSS編寫出來的檔案k數比用table寫出來的要小，不信你在頁面中放1000個table和1000個div比比看哪個檔案大
2、table必須在頁面完全載入後才顯示，沒有載入完畢前，table為一片空白，也就是說，需要頁面完畢才顯示，而div是逐行顯示，不需要頁面完全載入完畢，就可以一邊載入一邊顯示
3、非表格內容用table來裝，不符合標籤語義化要求，不利於SEO
4、table的巢狀性太多，用DIV程式碼會比較簡潔
……
二、但我想要一個表格的佈局方式怎麼辦？
好處很多，但是有的專案中又需要類似表格的佈局怎麼辦呢？可以用display:table來解決
display:table系列幾乎是和table系的元素相對應的，請看下錶：
| table | （類似 <table>）此元素會作為塊級表格來顯示，表格前後帶有換行符。 |
| inline-table | （類似 <table>）此元素會作為內聯表格來顯示，表格前後沒有換行符。 |
| table-row-group | （類似 <tbody>）此元素會作為一個或多個行的分組來顯示。 |
| table-header-group | （類似 <thead>）此元素會作為一個或多個行的分組來顯示。 |
| table-footer-group | （類似 <tfoot>）此元素會作為一個或多個行的分組來顯示。 |
| table-row | （類似 <tr>）此元素會作為一個表格行顯示。 |
| table-column-group | （類似 <colgroup>）此元素會作為一個或多個列的分組來顯示。 |
| table-column | （類似 <col>）此元素會作為一個單元格列顯示。 |
| table-cell | （類似 <td> 和 <th>）此元素會作為一個表格單元格顯示。 |
| table-caption | （類似 <caption>）此元素會作為一個表格標題顯示。 |
目前display:table的應用場景也是比較廣泛的，Google地圖在搜尋路線時，左側的路線詳情就是用的display:table來實現的。
三、如何使用display:table？
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>模擬表格</title>
</head>
<body>
<style type="text/css" rel="stylesheet">
.table {
display: table;
border: 1px solid #cccccc;
margin: 5px;
/*display: table時padding會失效*/
}
.row {
display: table-row;
border: 1px solid #cccccc;
/*display: table-row時margin、padding同時失效*/
}
.cell {
display: table-cell;
border: 1px solid #cccccc;
padding: 5px;
/*display: table-cell時margin會失效*/
}
</style>
<div class="table">
<div class="row">
<div class="cell">張三</div>
<div class="cell">李四</div>
<div class="cell">王五</div>
</div>
<div class="row">
<div class="cell">張三</div>
<div class="cell">李四</div>
<div class="cell">王五</div>
</div>
</div>
</body>
</html>
由此，我們可以用display:table系列在做一些常用的佈局設計
1、讓塊級標籤實現行內效果，即浮動至同一橫軸
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display:table實現浮動效果</title>
</head>
<body>
<style type="text/css" rel="stylesheet">
.table {
display: table;
margin: 5px;
width: 1000px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 10px;
}
</style>
<div class="table">
<div class="row">
<div class="cell">內容內容內容內容內容內內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
<div class="cell">內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
<div class="cell">內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
</div>
</div>
</body>
</html>
2、實現垂直居中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display:table實現垂直居中</title>
</head>
<body>
<style type="text/css" rel="stylesheet">
.table {
display: table;
margin: 5px;
width: 500px;
height: 300px;
background-color: #ccc;
}
.cell {
display: table-cell;
padding: 10px;
vertical-align: middle;/*該屬性是定義行內元素垂直對齊的，只有行內元素會生效。在表單元格中，這個屬性會設定單元格框中的單元格內容的對齊方式。*/
}
</style>
<div class="table">
<div class="cell">內容內容內容內容內容內內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
</div>
</body>
</html>