表格单元格中的CSS 100％宽度滚动条（overflow-x）

Question

这是我的第一篇文章。最后我决定和stackoverflow一起加入你们所有人！

我的问题是水平滚动条必须100％适合其容器。在以下示例中，您将找到理解我的问题所需的一切。

http://jsfiddle.net/cexUr

所以问题是：为什么代码在第一种情况下正常工作但嵌套在表格单元格中（第二种情况）然后滚动条溢出其容器？为什么会发生这种情况？如何解决？ 可以说：“只是摆脱表格”，但我需要这个代码在一个有一些表格布局的大网站上工作。摆脱桌子对我来说意味着一百个小时的工作。

第一个（正确）和第二个滚动（不正确）之间的主要区别是：

首先滚动（正确）

<div class="hscroll"> (images) </div>

水平滚动的CSS代码：

.hscroll {
    overflow-x:scroll;
    overflow-y:hidden;
    white-space:nowrap;
}

第二次滚动（不正确）

<table><tr><td> (same code as first scroll) </td></tr></table>

我非常感谢你的明智建议。

杰拉德。

Answer 1

table { table-layout: fixed; }

使桌子固定解决了我。

编辑：好像我已经太晚了几秒钟！

Answer 2

将table-layout: fixed;添加到您的.table课程。

.table{width:100%;margin-top:50px; table-layout: fixed; }

以下是一个例子：

http://jsfiddle.net/cexUr/2/