display:table的用法

時間 2019-11-19

標籤 display table 用法欄目 CSS 简体版

原文原文鏈接

目前，在大多數開發環境中，已經基本不用table元素來作網頁佈局了，取而代之的是div+css，那麼爲何不用table系表格元素呢？css

一、用DIV+CSS編寫出來的文件k數比用table寫出來的要小，不信你在頁面中放1000個table和1000個div比比看哪一個文件大html

二、table必須在頁面徹底加載後才顯示，沒有加載完畢前，table爲一片空白，也就是說，須要頁面完畢才顯示，而div是逐行顯示，不須要頁面徹底加載完畢，就能夠一邊加載一邊顯示瀏覽器

三、非表格內容用table來裝，不符合標籤語義化要求，不利於SEO佈局

四、table的嵌套性太多，用DIV代碼會比較簡潔spa

可是有的項目中又須要相似表格的佈局怎麼辦呢？能夠用display:table來解決code

display:table系列幾乎是和table系的元素相對應的，請看下錶：htm

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來實現的。對象

1.div模擬表格：blog

<!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>

2.讓塊級標籤實現行內效果，即浮動至同一橫軸，並實現等高效果開發

table表格中的單元格最大的特色之一就是同一行列表元素都等高。因此，不少時候，咱們須要等高佈局的時候，就能夠藉助display:table-cell屬性。說到table-cell的佈局，不得不說一下「匿名錶格元素建立規則」：

CSS2.1表格模型中的元素，可能不會所有包含在除HTML以外的文檔語言中。這時，那些「丟失」的元素會被模擬出來，從而使得表格模型可以正常工做。全部的表格元素將會自動在自身周圍生成所需的匿名table對象，使其符合table/inline-table、table-row、table- cell的三層嵌套關係。

舉個例子吧，若是咱們爲元素使用「display:table-cell;」屬性，而不將其父容器設置爲「display:table-row;」屬性，瀏覽器會默認建立出一個表格行，就好像文檔中真的存在一個被聲明的表格行同樣。

<!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;
        background-color: red;
    }
</style>
<div class="table">
    <div class="row">
        <div class="cell">內容內容內容內容內容內內容內</div>
        <div class="cell">內容內容內容內容內容內容內容內容內容</div>
        <div class="cell">內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
    </div>
</div>
</body>
</html>