css Table布局-display:table

使用表格布局一直是一个敏感的主题。通常状况下，Web开发人员考虑基于表格布局是禁忌。尽管反对的理由看起来证据很充分，可是大多数开发者除了谴责基于表格的布局，都没法提供完善的使用场景。“表格很差。”

从早期反对HTML Table（<table>标签）开始这种势头就很是强劲。几代开发者被成功洗脑，根深蒂固的认为：任何使用表格都是邪恶的。

诚然，我也是避免使用表格布局的开发者之一，即便是显示表格数据。

我甚至曾经斥责个人下属开发者同事，当他们使用 display:table 用来表仪式的布局（或圣杯布局）的时候。

回想起来，头脑麻木并且倔强的我花了大把时间，为此写了一堆CSS hack，是多么的好笑。

两种类型的表格布局

你有两种方式使用表格布局 -HTML Table（<table>标签）和CSS Table（display:table 等相关属性）。

HTML Table是指使用原生的<table>标签，而CSS Table是指用CSS属性模仿HTML 表格的模型。

在W3C关于<table>相关标签的文档中咱们能够找到，HTML 4中<table>相关标签的默认样式表：

js 代码:

1. table { display: table }
2. tr { display: table-row }
3. thead { display: table-header-group }
4. tbody { display: table-row-group }
5. tfoot { display: table-footer-group }
6. col { display: table-column }
7. colgroup { display: table-column-group }
8. td, th { display: table-cell }
9. caption { display: table-caption }

显而易见HTML Table使用标签<table>、<tr>、<td>等标签，就是使用CSS Table的相关属性来实现的。从上面HTML4的默认样式表中能够看出他们的使用对于CSS属性的状况：

• 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 代码:

1. ul {
2. list-style: none;
3. margin: 0;
4. padding: 0;
5. display: table-row
6. }
7.  
8. li {
9. display: table-cell;
10. background-color: #BD4932;
11. }

毕竟这样好理解，能够当作是一个table，并且达到的效果几乎同样（实际有细微的差异）。

这里CSS Table布局的优势就显现出来了，咱们只要选择咱们想用的合适的属性就能够了，而HTML Table者须要咱们使用固定的标签格式。

响应式布局

See the Pen 用display:table实现的响应式布局 by 愚人码头 (CodePen.dark

正如刚才提到的，CSS Table布局可让一个元素表现上不像一个表格。只要将元素的display属性从table-cell 切换到 block，咱们就可以将元素堆叠起来。

你能够根据屏幕的但是区域改变元素堆砌的顺序。例如，上面的例子中，咱们使用了媒体查询，当页面宽度小于等于42opx的时候，将元素纵向堆叠起来：

js 代码:

1. @media (max-width: 420px) {
2. .box {
3. display: block;
4. width: 100%;
5. }
6. }

更多有关该技术你能够阅读这篇文章。

动态高度的页脚贴在页面底部

先来看一个示意图：

页脚动态贴在底部须要知足如下两个条件：

• 当主体的内容高度不超过可视区域高度的时候，页脚贴在页面底部。
• 当主体的内容高度超过可视区域高度的时候，页脚将按正常布局。

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）。

小结

经过上述实例，我但愿可以揭示饱受诟病的 display:table 的一下优秀的地方。不过，我要强调的是CSS Table不是布局包治百病的良方。你能够阅读一下几个古怪的BUG：

https://bugzilla.mozilla.org/show_bug.cgi?id=63895

https://bugs.chromium.org/p/chromium/issues/detail?id=103543

在合适的范围内，合理的利用CSS Table，能减轻研究CSS Hack的痛苦。

转自http://www.css88.com/archives/6308#more-6308