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

【问题标题】：CSS 100% width scrollbar (overflow-x) within a table cell表格单元格内的 CSS 100% 宽度滚动条 (overflow-x)
【发布时间】：2013-03-29 03:40:22
【问题描述】：

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

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

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

第一个（正确）和第二个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>

非常感谢您的明智建议。

杰拉德。

【问题讨论】：

【解决方案1】：

将table-layout: fixed; 添加到您的.table 类中。

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

这是一个例子：

【讨论】：

【解决方案2】：

table { table-layout: fixed; }

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

编辑：看来我晚了几秒钟！

【讨论】：