布局秘密武器＃1：CSS表属性

CSS display: table 属性：解决布局难题的利器

核心要点：

• CSS 的 table 属性功能强大，能解决多种布局问题，并兼容所有现代浏览器。它允许 HTML 元素像表格元素一样运作，为复杂的布局和对齐问题提供通用的解决方案。
• CSS table 属性可用于创建等高盒子、简单的旧式布局以及具有内容编排功能的自适应布局。它在响应式设计中尤其有用，允许元素根据用户的屏幕尺寸调整其大小和位置。
• 尽管 CSS table 属性有很多优点，但它也有一些局限性。与其他显示属性相比，它在创建复杂布局方面的灵活性较低，并且与某些 CSS 属性（如 float 和 position）配合使用效果不佳。但是，在许多情况下，使用 table 属性的优势大于其缺点。

目前，Flexbox 可能是布局构建的热门新技术。Flexbox 适应可用空间的惊人能力，让许多人对它的可能性充满了期待。然而，它无法解决所有布局问题，而且它与旧版浏览器的兼容性也存在一些问题。Flexbox 目前并没有通用的 polyfill（旧版浏览器的回退方案）——目前我只知道一个针对 2009 年版本的 IE 的 polyfill：Flexie。在许多情况下，我发现使用经常被忽略的 CSS table 显示属性可以找到更简单的解决方案。这些 CSS 属性得到了所有相关浏览器的广泛支持（注意，这排除了 IE6 和 IE7），并且可以优雅地解决一些主要的和小的布局难题。

如果您不完全熟悉此技术，更改 DIV 的 display 属性可以使其 表现 得像表格或表格元素。

等等，用表格进行布局？这不好吧？

21 世纪初最热门的网页设计话题之一，就是关于使用 HTML 表格代码作为布局工具的争论。那是一种 hack，现在仍然是不好的做法。

相反，我们在这里使用完全有意义的 HTML（即 DIV、SECTION、HEADER 等），只是从 CSS 中借用了一些有用的表格表示知识。这正是 CSS 的设计目的，所以不要觉得这是一个 hack 或补丁。它不是。

使用 display: table-cell

在下面的示例中，点击顶部的按钮，您可以将三个彩色 DIV 的 display 属性从 block 更改为 table-cell：

[CodePen 示例链接 - 替换为实际 CodePen 链接]

您可以看到 DIV 如何在不需要任何 float 属性的情况下进行水平排列，并且您还可以访问一些典型的表格规则（就像 vertical-align）。

如果您需要一些间距，请注意，经典的 CSS margin 属性对表格单元格没有任何影响：而是使用 border-spacing（它必须应用于容器表格元素）。如果您想使用这些规则，可以在 Codepen 中找到一些注释行。

此技术对于解决许多难以用其他方法解决的问题非常有用。

我已经挑选出三个简单的案例，其中 table 显示属性非常有价值。

但首先让我们看看它们：

display 属性

呈现为

table, inline-table

display 属性	呈现为
table, inline-table	table
table-column	col
table-column-group	colgroup
table-row-group	tbody
table-header-group	thead
table-footer-group	tfoot
table-row	tr
table-cell	td
table-caption	caption

table-column

col

table-column-group

colgroup

table-row-group

tbody

table-header-group

thead

table-footer-group

tfoot

table-row

tr

table-cell

td

table-caption

caption

有关表格和 CSS 的真正全面指南，请查看 CSS Tricks：[CSS Tricks 的表格指南链接 - 替换为实际链接]

案例 1. 等高盒子

我认为这是我处理的最常见问题之一：有一些带有未知内容的浮动盒子，您必须使它们都具有相同的高度。

我知道，Flexbox 可以轻松解决这个问题，但表格规则也可以做到。

只需将 display: table（或 table-row）属性应用于容器，并将 display: table-cell 属性应用于内部盒子。注意要删除任何 float 属性（否则 table-cell 属性不会生效）。

HTML：

<code class="language-html"><div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div></code>

CSS：

<code class="language-css">#wrapper {
    display: table;
}
#wrapper div {
    display: table-cell;
}</code>

[CodePen 示例链接 - 替换为实际 CodePen 链接]

案例 2. 简单的旧式布局

这是一个比较过时的例子，但我认为您可能需要处理它，就像我最近做的那样。

几个月前，我收到一个与以下方案非常相似的图形布局。它需要与 IE8 兼容，我发现最好的方法是使用 CSS 表格规则：

[CodePen 示例链接 - 替换为实际 CodePen 链接]

案例 3. 具有内容编排功能的自适应布局

前面的例子引导我们进入一个新的主题：是否可以使用 CSS 表格规则构建自适应布局？

这不仅是可能的，而且我们还可以执行一些内容编排任务。

我们已经看到，如何将两个 div 的 display 属性从 block 更改为 table-cell 可以将其排列方式从垂直更改为水平。

此外，具有 table-header-group 属性的元素会被置于表格布局的顶部。同样，table-footer-group 元素会被置于底部，依此类推。在重新格式化响应式布局时，这可能出乎意料地有用。

在下面的笔中，标题元素在窗口调整大小时与其位置与导航元素交换，只需将其 display 属性更改为 table-header-group。

HTML：

<code class="language-html"><div id="wrapper">
    <nav></nav>
    <header></header>
    <div id="banner2"></div>
    <footer></footer>
</div></code>

CSS：

<code class="language-css">#wrapper, header {
    display: block; /* 我们实际上不需要此规则，因为它默认为此值 */
}

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

footer 和 #banner2 div 也会出现类似的行为。

这是一个布局方案：左侧是默认的移动版本，右侧是桌面版本：

这是一个运行中的演示：

[CodePen 示例链接 - 替换为实际 CodePen 链接]

有关此论点的更多信息，还可以查看：

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

结论

CSS table 显示属性是解决大小布局挑战的被低估且有价值的解决方案。

虽然我个人可能不会选择使用它们来构建复杂的布局，但它们肯定可以解决与布局部分相关的许多难题。

关于 CSS table 属性的常见问题解答

（此处应补充关于CSS table 属性的常见问题解答，内容与原文类似，但需调整措辞，避免重复。）

请注意，以上所有CodePen链接都需要替换成实际的CodePen链接。 我无法直接访问和创建CodePen。

以上是布局秘密武器＃1：CSS表属性的详细内容。更多信息请关注PHP中文网其他相关文章！