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

核心要點：

• CSS 的 table 屬性功能強大，能解決多種佈局問題，並兼容所有現(xiàn)代瀏覽器。它允許 HTML 元素像表格元素一樣運作，為複雜的佈局和對齊問題提供通用的解決方案。
• CSS table 屬性可用於創(chuàng)建等高盒子、簡單的舊式佈局以及具有內(nèi)容編排功能的自適應(yīng)佈局。它在響應(yīng)式設(shè)計中尤其有用，允許元素根據(jù)用戶的屏幕尺寸調(diào)整其大小和位置。
• 儘管 CSS table 屬性有很多優(yōu)點，但它也有一些局限性。與其他顯示屬性相比，它在創(chuàng)建複雜佈局方面的靈活性較低，並且與某些 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) 得像表格或表格元素。

等等，用表格進(jìn)行佈局？這不好吧？

21 世紀(jì)初最熱門的網(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 屬性的情況下進(jìn)行水平排列，並且您還可以訪問一些典型的表格規(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. 等高盒子

我認(rèn)為這是我處理的最常見問題之一：有一些帶有未知內(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. 簡單的舊式佈局

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

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

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

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

前面的例子引導(dǎo)我們進(jìn)入一個新的主題：是否可以使用 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)式佈局時，這可能出乎意料地有用。

在下面的筆中，標(biāo)題元素在窗口調(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ī)則，因為它默認(rèn)為此值 */
}

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

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

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

這是一個運行中的演示：

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

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

• 使用 display:table 進(jìn)行 CSS 堆疊
• CSS 佈局的反英雄——“display:table”

結(jié)論

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

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

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

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

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

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