display:table的幾個妙用：垂直居中、浮動……

時間 2019-11-18

標籤 display table 幾個妙用垂直居中浮動欄目 CSS 简体版

原文原文鏈接

1、爲何不用table系表格元素？css

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

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

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

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

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

……htm

2、但我想要一個表格的佈局方式怎麼辦？blog

好處不少，可是有的項目中又須要相似表格的佈局怎麼辦呢？能夠用display:table來解決開發

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

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

3、如何使用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系列在作一些經常使用的佈局設計

一、讓塊級標籤實現行內效果，即浮動至同一橫軸

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

二、實現垂直居中

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

今天先這麼多，之後發現有新的妙用繼續補充

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。