css - 带有水平滚动条的 Foundation 5 表格

Question

我想知道Zurb Foundationtable是否有许多专栏的修复。显然，3 到 6 列table仍然会响应......但我的表有 12 列。而且我认为框架会将滚动条放到表格中。

但我的问题是，它没有。那么我怎样才能把水平滚动条放到table? 我想在表格到达其父级的水平边界时给它一个滚动条（在我的例子中是 a div）：

table.oversized { overflow-x: scroll; }

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

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

而且......它的工作原理。但要width长约 100 像素。

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

谢谢。

score 1 · Accepted Answer

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

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

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

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

1 回答 1