css Table佈局-display:table

時間 2019-11-18

標籤 css table 佈局 display 欄目 CSS 简体版

原文原文鏈接

使用表格佈局一直是一個敏感的主題。通常狀況下，Web開發人員考慮基於表格佈局是禁忌。儘管反對的理由看起來證據很充分，可是大多數開發者除了譴責基於表格的佈局，都沒法提供完善的使用場景。「表格很差。」css

從早期反對HTML Table（<table>標籤）開始這種勢頭就很是強勁。幾代開發者被成功洗腦，根深蒂固的認爲：任何使用表格都是邪惡的。html

誠然，我也是避免使用表格佈局的開發者之一，即便是顯示錶格數據。git

我甚至曾經斥責個人下屬開發者同事，當他們使用 display:table 用來表儀式的佈局（或聖盃佈局）的時候。github

回想起來，頭腦麻木並且倔強的我花了大把時間，爲此寫了一堆CSS hack，是多麼的好笑。瀏覽器

兩種類型的表格佈局

你有兩種方式使用表格佈局 -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屬性的狀況：flex

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）

一個關鍵的區別

做爲從《CSS禪意花園》中學習CSS的我的，我討厭HTML Table佈局。我不知不覺的產生了「虛幻的相關偏見」，高估HTML Table和CSS Table之間的區別。優化

若是它看起來、工做起來、聽起來像一個表格，那麼它必須是一個表格？錯誤！

事實上，HTML Table和CSS Table之間的真正區別是：

適當地調整CSS屬性，CSS的Table能作到許多HTML Table 不能作的事情，能夠從Table中擇優選擇屬性使用。

下面是一些 display:table 示例，你可能會發現它頗有用：

動態垂直居中對齊

See the Pen 用display:table實現居中對齊 by 愚人碼頭 (CodePen.dark

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

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

動態水平居中對齊

爲了讓元素動態水平居中對齊，您能夠設置元素爲display:inline-block。而後在該元素的外面包裹層元素上設置 text-align:center 。這裏的文本對齊缺點是有反作用。外面包裹層內的全部子元素將繼承了 text-align:center 屬性，形成潛在的覆蓋。

感謝@mojtabaseyedi,我發現了動態水平居中對齊元素，並且無反作用的新方法。再動態元素上應用display:table 和 margin: auto。

See the Pen CSS佈局：動態水平居中對齊 by 愚人碼頭 (CodePen.dark

你們能夠留意一下，li元素上爲何不使用display: table-cell來達到像要的效果，甚至在ul元素上應用 display: table-row ：

js 代碼:

ul {
list-style: none;
margin: 0;
padding: 0;
display: table-row
}
li {
display: table-cell;
background-color: #BD4932;
}

畢竟這樣好理解，能夠當作是一個table，並且達到的效果幾乎同樣（實際有細微的差異）。

這裏CSS Table佈局的優勢就顯現出來了，咱們只要選擇咱們想用的合適的屬性就能夠了，而HTML Table者須要咱們使用固定的標籤格式。

響應式佈局

See the Pen 用display:table實現的響應式佈局 by 愚人碼頭 (CodePen.dark

正如剛纔提到的，CSS Table佈局可讓一個元素表現上不像一個表格。只要將元素的display屬性從table-cell 切換到 block，咱們就可以將元素堆疊起來。

你能夠根據屏幕的但是區域改變元素堆砌的順序。例如，上面的例子中，咱們使用了媒體查詢，當頁面寬度小於等於42opx的時候，將元素縱向堆疊起來：

js 代碼:

@media (max-width: 420px) {
.box {
display: block;
width: 100%;
}
}

更多有關該技術你能夠閱讀這篇文章。

動態高度的頁腳貼在頁面底部

先來看一個示意圖：

頁腳動態貼在底部須要知足如下兩個條件：

當主體的內容高度不超過可視區域高度的時候，頁腳貼在頁面底部。
當主體的內容高度超過可視區域高度的時候，頁腳將按正常佈局。

See the Pen 使用display:table實現動態高度的頁腳貼在頁面底部 by 愚人碼頭 (CodePen.dark

若是你搜索頁腳貼在底部解決方案，你可能已經搜索到由 Chris Coyier 或 Ryan Fait 提供的這些有用的代碼片斷。

他們的解決方案可以很好的工做，但只有一個缺點 – 頁腳必須是固定的高度。你能夠用JavaScript來解決這個問題，但我更喜歡用CSS來解決它。使用display:table，你能夠建立動態高度頁腳使其貼在頁面底部。

聖盃佈局

來自alistapart的文章，聖盃佈局指的是一個網頁由頁眉，3等高列（2個固定側欄和中心內容主體）和貼在頁面底部的頁腳組成。

聖盃佈局再儘量的狀況下，應實現這些目標以下：

具備中心內容主體與固定寬度的側邊欄；
在源代碼中,容許中心內容主體列出如今第一個節點位置；
容許任何一列的高度最高；

使用display:table實現的聖盃佈局

See the Pen 使用display:table實現的聖盃佈局 by 愚人碼頭 (CodePen.dark

以上codepen代碼再現了聖盃佈局。你能夠調整窗口的大小，在中心內容主體列中添加更多的內容來測試貼在頁面底部的頁腳。沒能知足的惟一目標是第二點：在源代碼中,容許中心內容主體列出如今第一個節點位置；

我猜這目標的目的是搜索引擎優化（SEO）。所以，若是搜索引擎優化不是很是重要的話，display:table 將相對容易地實現聖盃佈局。

你在開玩笑嗎？ CSS的Flex能夠解決一切問題！

事實上，它能夠。看看菲利普·沃爾頓的flex 解決方案解決我上面的例子。不過，不要急於下結論。IE8和IE9仍然佔據的桌面瀏覽器32％的市場份額，若是咱們想使用 flex 解決方案，就必須放棄IE8和IE9這部分用戶。若是網站只須要知足移動端或者像Chrome這樣的高級瀏覽器，那你但是大膽嘗試flex 解決方案，不然我仍是會堅持使用display:table。（愚人碼頭注：做者寫這篇文章的時間是：2014-10-27）。