Foundation 5 table 带水平滚动条

Question

我想知道 Zurb Foundation 是否修复了 table 中的许多列。显然，3 到 6 列的 table 仍然会响应...但是我的 table 有 12 列。而且我以为框架会把滚动条放到table.

但我的问题是，它没有。那么怎么才能把水平滚动条放到table呢？我想在 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 布局必须有 table-layout: fixed; -- 但根据我读过的内容，您将很难获得 table 来可靠地使用滚动条并且是最好将它应用于包含 div。

例如，this solution:

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

在 FF 和 Chrome 中给你一个滚动条，但没有拖动器，所以滚动条是无用的。

我尝试在 Foundation 5 中使用 div 上的“large-12 centered columns”将 table 包装在 div 中，但没有看到您描述的 100px。请说明包含 div 的格式是如何使用 F5 网格格式化的，因为这会影响儿童的行为。

Foundation 5 table with horizontal scroll bar