4

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

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

http://jsfiddle.net/cexUr

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

第一个(正确)和第二个 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>

我会非常感谢您的明智建议。

杰拉德。

4

2 回答 2

7

table { table-layout: fixed; }

固定桌子为我解决了这个问题。

编辑:似乎我晚了几秒钟!

于 2013-04-06T20:35:32.590 回答
6

添加table-layout: fixed;到您的.table班级。

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

这是一个例子:

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

于 2013-04-06T20:34:15.713 回答