CSS display: table 屬性：解決布局難題的利器

核心要點：

• CSS 的 table 屬性功能強大，能解決多種布局問題，并兼容所有現(xiàn)代瀏覽器。它允許 HTML 元素像表格元素一樣運作，為復(fù)雜的布局和對齊問題提供通用的解決方案。
• CSS table 屬性可用于創(chuàng)建等高盒子、簡單的舊式布局以及具有內(nèi)容編排功能的自適應(yīng)布局。它在響應(yīng)式設(shè)計中尤其有用，允許元素根據(jù)用戶的屏幕尺寸調(diào)整其大小和位置。
• 盡管 CSS table 屬性有很多優(yōu)點，但它也有一些局限性。與其他顯示屬性相比，它在創(chuàng)建復(fù)雜布局方面的靈活性較低，并且與某些 CSS 屬性（如 float 和 position）配合使用效果不佳。但是，在許多情況下，使用 table 屬性的優(yōu)勢大于其缺點。

目前，F(xiàn)lexbox 可能是布局構(gòu)建的熱門新技術(shù)。Flexbox 適應(yīng)可用空間的驚人能力，讓許多人對它的可能性充滿了期待。然而，它無法解決所有布局問題，而且它與舊版瀏覽器的兼容性也存在一些問題。Flexbox 目前并沒有通用的 polyfill（舊版瀏覽器的回退方案）——目前我只知道一個針對 2009 年版本的 IE 的 polyfill：Flexie。在許多情況下，我發(fā)現(xiàn)使用經(jīng)常被忽略的 CSS table 顯示屬性可以找到更簡單的解決方案。這些 CSS 屬性得到了所有相關(guān)瀏覽器的廣泛支持（注意，這排除了 IE6 和 IE7），并且可以優(yōu)雅地解決一些主要的和小的布局難題。

如果您不完全熟悉此技術(shù)，更改 DIV 的 display 屬性可以使其 表現(xiàn) 得像表格或表格元素。

等等，用表格進行布局？這不好吧？

21 世紀初最熱門的網(wǎng)頁設(shè)計話題之一，就是關(guān)于使用 HTML 表格代碼作為布局工具的爭論。那是一種 hack，現(xiàn)在仍然是不好的做法。

相反，我們在這里使用完全有意義的 HTML（即 DIV、SECTION、HEADER 等），只是從 CSS 中借用了一些有用的表格表示知識。這正是 CSS 的設(shè)計目的，所以不要覺得這是一個 hack 或補丁。它不是。

使用 display: table-cell

在下面的示例中，點擊頂部的按鈕，您可以將三個彩色 DIV 的 display 屬性從 block 更改為 table-cell：

[CodePen 示例鏈接 - 替換為實際 CodePen 鏈接]

您可以看到 DIV 如何在不需要任何 float 屬性的情況下進行水平排列，并且您還可以訪問一些典型的表格規(guī)則（就像 vertical-align）。

如果您需要一些間距，請注意，經(jīng)典的 CSS margin 屬性對表格單元格沒有任何影響：而是使用 border-spacing（它必須應(yīng)用于容器表格元素）。如果您想使用這些規(guī)則，可以在 Codepen 中找到一些注釋行。

此技術(shù)對于解決許多難以用其他方法解決的問題非常有用。

我已經(jīng)挑選出三個簡單的案例，其中 table 顯示屬性非常有價值。

但首先讓我們看看它們：

有關(guān)表格和 CSS 的真正全面指南，請查看 CSS Tricks：[CSS Tricks 的表格指南鏈接 - 替換為實際鏈接]

案例 1. 等高盒子

我認為這是我處理的最常見問題之一：有一些帶有未知內(nèi)容的浮動盒子，您必須使它們都具有相同的高度。

我知道，F(xiàn)lexbox 可以輕松解決這個問題，但表格規(guī)則也可以做到。

只需將 display: table（或 table-row）屬性應(yīng)用于容器，并將 display: table-cell 屬性應(yīng)用于內(nèi)部盒子。注意要刪除任何 float 屬性（否則 table-cell 屬性不會生效）。

HTML：

<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

CSS：

#wrapper {
    display: table;
}
#wrapper div {
    display: table-cell;
}

[CodePen 示例鏈接 - 替換為實際 CodePen 鏈接]

案例 2. 簡單的舊式布局

這是一個比較過時的例子，但我認為您可能需要處理它，就像我最近做的那樣。

幾個月前，我收到一個與以下方案非常相似的圖形布局。它需要與 IE8 兼容，我發(fā)現(xiàn)最好的方法是使用 CSS 表格規(guī)則：

[CodePen 示例鏈接 - 替換為實際 CodePen 鏈接]

案例 3. 具有內(nèi)容編排功能的自適應(yīng)布局

前面的例子引導(dǎo)我們進入一個新的主題：是否可以使用 CSS 表格規(guī)則構(gòu)建自適應(yīng)布局？

這不僅是可能的，而且我們還可以執(zhí)行一些內(nèi)容編排任務(wù)。

我們已經(jīng)看到，如何將兩個 div 的 display 屬性從 block 更改為 table-cell 可以將其排列方式從垂直更改為水平。

此外，具有 table-header-group 屬性的元素會被置于表格布局的頂部。同樣，table-footer-group 元素會被置于底部，依此類推。在重新格式化響應(yīng)式布局時，這可能出乎意料地有用。

在下面的筆中，標題元素在窗口調(diào)整大小時與其位置與導(dǎo)航元素交換，只需將其 display 屬性更改為 table-header-group。

HTML：

<div id="wrapper">
    <nav></nav>
    <header></header>
    <div id="banner2"></div>
    <footer></footer>
</div>

CSS：

#wrapper, header {
    display: block; /* 我們實際上不需要此規(guī)則，因為它默認為此值 */
}

@media (min-width: 48em) {
    #wrapper {
        display: table;
    }
    header {
        display: table-header-group;
    }
}

footer 和 #banner2 div 也會出現(xiàn)類似的行為。

這是一個布局方案：左側(cè)是默認的移動版本，右側(cè)是桌面版本：

這是一個運行中的演示：

[CodePen 示例鏈接 - 替換為實際 CodePen 鏈接]

有關(guān)此論點的更多信息，還可以查看：

• 使用 display:table 進行 CSS 堆疊
• CSS 布局的反英雄——“display:table”

結(jié)論

CSS table 顯示屬性是解決大小布局挑戰(zhàn)的被低估且有價值的解決方案。

雖然我個人可能不會選擇使用它們來構(gòu)建復(fù)雜的布局，但它們肯定可以解決與布局部分相關(guān)的許多難題。

關(guān)于 CSS table 屬性的常見問題解答

（此處應(yīng)補充關(guān)于CSS table 屬性的常見問題解答，內(nèi)容與原文類似，但需調(diào)整措辭，避免重復(fù)。）

請注意，以上所有CodePen鏈接都需要替換成實際的CodePen鏈接。 我無法直接訪問和創(chuàng)建CodePen。

以上是布局秘密武器＃1：CSS表屬性的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！