通过CSS应用colspan？

Question

所以，我正在制作一个利用display:table，display:table-row和display:table-cell的CSS布局。但是，我遇到了一个问题：

我需要将colspan应用于我的一个DIV。

然而，将此属性添加到DIV几乎是纯粹的邪恶。我有什么选择？

请参阅：http://jsfiddle.net/RhFz6

---

编辑：

我找到了一个解决方案：http://jsfiddle.net/RhFz6/4

我没有把所有东西都变成桌子，而是把中心区域变成了桌子。页眉和页脚保留为块元素。从那里，我给表格100％的高度和负边距，使其适合页面。结果很漂亮！

Answer 1

我不明白为什么当<table>标签仍然在那里并且完全有效使用时，人们宁愿让自己的生活变得生硬。使用表格，您可以应用所需的所有rowspan和colspan。添加table-layout: fixed，你可以可靠地指定单元格的宽度和高度，到目前为止我没有看到任何缺点。

表格甚至包含有用的功能，例如cellIndex和rowIndex，将tHead，tFoot和tBodies[]分组在一起。通过使用表格向我们展示的属性，有很多东西变得更容易。

Answer 2

不确定这是否是您所指的“邪恶”选项，但有一个column-span属性，虽然它目前仅由Chrome and Opera支持。

修改

查看小提琴示例，如果只在第一行和最后一行（表格页眉和页脚）上需要colspan，那么您应该有一些选项。即使你伪造了这些行，它也不会破坏内部行的一致列大小。

Answer 3

你绝对要假一张桌子吗？从你的JSFiddle看起来，你只是想让＃sidebar和#content彼此相邻。浮点数可以很容易地完成。如果你想让#sidebar和#content divs有一个背景并希望它们的高度相同，那么试着把你放在#sidebar上的背景放在#main上。即使#sidebar不是具有背景的元素，它看起来仍然是一样的。

概念证明： http://jsfiddle.net/RhFz6/3/

Answer 4

我想通了，我的解决方案实际上也不需要包装器，这非常好。见这里：

http://jsfiddle.net/RhFz6/4

使我的情况变得困难的是，除了页眉和页脚之外，我在主体区域需要三列。此外，布局是流体宽度，所以我不能只使用伪列。当然，我也不想使用桌子，因为，好吧，我会感到内疚。 ：P

我没有将整个布局视为一个表，这就是我需要列跨度的原因，而是简单地将中心区域设为一个表格。页眉和页脚只是显示为块元素。然后，我将html和body的高度设置为100％，然后使中心内容区域的高度为100％。不幸的是，这推动了窗口区域的最小尺寸布局，因为它是100％的高度加上页眉和页脚。

为了解决这个问题，我只是在伪表中添加了一些负边距，对单元格进行了一些正向填充（所以你仍然可以在页眉和页脚重叠表后看到内容），还有一些奇特的z-索引工作（因为标题位于表格下方，而不是在其上方）

而且，ta-da！适用于所有现代浏览器，但未在旧版浏览器中测试过。谢谢你的帮助！