因此，我正在制作一个利用display:table、display:table-row和display:table-cell. 但是，我遇到了一个问题：
我需要对我的一个 DIV 应用 colspan。
但是，将此属性添加到 DIV 几乎是纯粹的邪恶。我有哪些选择？
见：http: //jsfiddle.net/RhFz6
我找到了一个解决方案：http: //jsfiddle.net/RhFz6/4
我没有把所有东西都做成一张桌子，而是把中心区域做成一张桌子。页眉和页脚被保留为块元素。从那里，我给了表格 100% 的高度和负边距，以便它适合页面。结果很漂亮！
我不明白为什么人们宁愿把他们的生活变成一个活生生的地狱，试图伪造一张桌子，而<table>标签仍然在那里并且完全可以使用。使用表格，你可以应用所有你想要rowspan的。colspan添加table-layout: fixed，您可以可靠地指定单元格的宽度和高度，据我所知，没有任何缺点。
表格甚至具有有用的功能，例如cellIndexand 、rowIndexgrouping和together 。通过使用表向我们公开的属性，很多事情变得容易多了。tHeadtFoottBodies[]
你一定要伪造一张桌子吗？从您的 JSFiddle 来看，您似乎只是想将 #sidebar 和 #content 彼此相邻。这可以用浮点数相当容易地完成。如果您试图让#sidebar 和#content div 具有背景并希望它们的高度相同，请尝试将您放在#sidebar 上的背景放在#main 上。即使#sidebar 不是具有背景的元素，它看起来仍然是一样的。
概念证明：http: //jsfiddle.net/RhFz6/3/
我想通了，我的解决方案实际上也不需要包装器，这真的很好。看这里：
让我的处境变得困难的是，除了页眉和页脚之外，我还需要在主体区域中设置三列。此外，布局是可变宽度的，所以我不能只使用伪列。当然，我也不想使用桌子，因为，好吧，我会感到内疚。:P
我没有将整个布局视为表格，这就是我需要列跨度的原因，我只是将中心区域设置为表格。页眉和页脚被简单地显示为块元素。html然后我将和的高度设置body为 100%，然后使中心内容区域的高度为 100%。不幸的是，这将最小尺寸的布局推到了窗口区域之外，因为它是 100% 的高度加上页眉和页脚。
为了解决这个问题，我只是在伪表格中添加了一些负边距，在单元格中添加了一些正填充（这样在页眉和页脚与表格重叠后您仍然可以看到内容），以及一些花哨的 z-index 工作（因为标题在桌子下方，而不是在桌子上方）
而且，嗯，达达！适用于所有现代浏览器，但未在旧浏览器中测试。谢谢你的帮助！
不确定这是否是您所指的“邪恶”选项，但有一个column-span属性，虽然它看起来目前只有Chrome 和 Opera支持。
编辑：
查看小提琴示例，如果仅在第一行和最后一行（表格页眉和页脚）上需要 colspan，那么您应该有一些选择。即使您伪造这些行，它也不会破坏内部行的一致列大小。