CSS 表格单元格在 Chrome 或 FireFox 中不起作用？

【问题标题】：CSS table-cell does not work in Chrome or FireFox?CSS 表格单元格在 Chrome 或 FireFox 中不起作用？
【发布时间】：2013-10-27 19:31:07
【问题描述】：

我有以下代码——它在 IE 中正确呈现（奇怪的是），但在 Chrome 或 FireFox 中却没有，请参阅：

http://jsfiddle.net/eS34U/14/

.btn_group_fill { display:table;table-layout:fixed;width:100%; }
.btn_group_fill .btn { display:table-cell;float:none; }

基本上，带有“btn_group btn_group_fill”的元素应该跨越整个宽度——它在 IE 中是这样——但不是在 chrome 或 firefox 中——显然，我缺少一些 CSS 元素（或组合）；如果有见识的人能发现我的错误，我将不胜感激......

谢谢

【问题讨论】：

标签： css css-tables

【解决方案1】：

我认为这是特定于 button 元素的。大概浏览器对如何呈现这些内容有不同的看法。如果您将它们更改为 span 或 div，它将按预期呈现。

<div class="btn_group btn_group_fill">
    <div type="button" class="btn btn_primary">Group Button 1</div>
    <div type="button" class="btn btn_default">Group Button 2</div>
    <div type="button" class="btn btn_default">Group Button 3</div>
</div>

Example fiddle

此外，如果您希望“单元格”共享边框，border-collapse 属性在这里可能很有用。

border-collapse: collapse; /* is 'separate' by default */

【讨论】：