基础5表与水平滚动条

Question

我想知道 Zurb Foundation 是否在table中修复了很多列。显然，3到6列圆柱table仍然会响应......但我的桌子有12列。我认为框架会将滚动条放到表格中。

但我的问题是，它没有。那么我如何将水平滚动条放到table ？我想在表格到达其父级的水平边界时给出一个滚动条（在我的例子中，是div）：

table.oversized { overflow-x: scroll; }

但它不起作用。我尝试将scroll bar改为父div：

div.parent-of-an-oversize-table { overflow-x: scroll; }

而且.....它有效。但width的长度大约为100px。

有人可以帮我解决这个问题吗？我正在寻找Zurbs Foundation框架中的解决方案，但如果框架外还有其他解决方案，我们仍然感激不尽。

感谢。

Answer 1

表格布局必须有table-layout: fixed; - 但根据我所读到的内容，您将很难获得一张桌子可靠地使用滚动条，最好将其应用于包含div 。

例如，this solution：

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

为您提供FF和Chrome中的滚动条，但没有拖动器，因此滚动条无用。

我尝试使用＆＃34; large-12 centered columns＆＃34;在基础5中将表格包装在div中。在div上并没有看到你描述的100px。请包含如何使用F5网格格式化包含div，因为这会影响子项的行为。