html - 表格单元格内的 CSS 100% 宽度滚动条 (overflow-x)

Question

这是我的第一篇文章。最后我决定和大家一起参加 stackoverflow!

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

http://jsfiddle.net/cexUr

所以问题是:为什么代码在第一种情况下工作正常，但当嵌套在表格单元格(第二种情况)中时，滚动条会溢出其容器？为什么会发生这种情况，如何解决？ 有人可能会说:“只是摆脱表格”，但我需要这段代码在具有一些表格布局的大型站点中工作。摆脱 table 对我来说意味着一百个小时的工作。

第一个(正确的)和第二个 scrollb(不正确的)之间的主要区别是:

第一次滚动(正确)

<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; }

固定 table 对我来说解决了这个问题。

编辑:看来我来晚了几秒钟!