水平滚动表格而不将它们包装在 div 中答案

【问题标题】：Scrolling tables horizontally without wrapping them in div水平滚动表格而不将它们包装在 div 中
【发布时间】：2013-07-21 07:59:12
【问题描述】：

我想在文章中的表格宽度超过网页布局中的可用宽度时启用水平滚动。我试图仅使用 CSS 来实现这一点，但失败了。所以我不得不使用 jQuery 将所有内容包装在一个 div 中：$('table.data').wrap('<div class="tcontain" />');。然后我将以下CSS应用于tcontain div：width:100%;overflow-x:scroll;

这可行，但我想避免使用 JavaScript。请帮忙！

【问题讨论】：

很难在没有看到您的标记的情况下为您提供解决方案。您可以发布一个示例小提琴或指向您网站的链接吗？
@koala_dev 这里是jsfiddle.net/bLyu6

标签： html css overflow css-tables

【解决方案1】：

我找到了这个解决方案，但不幸的是它在 IE 中不起作用，甚至在 IE9 中也不起作用。

table{
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

Exaple fiddle

最后，如果您想避免更改文件中标记的麻烦，我认为您的 JS 解决方案将是最好的。

【讨论】：

谢谢！我同意我应该保留 JS 代码。但到目前为止，您的解决方案是最好的。实际上，我们希望让智能手机用户能够在狭窄的响应式设计中水平滚动表格。
请注意，如果您这样做，则不能为元素指定任何与表格相关的属性，因为从技术上讲，它不再是表格。符合规范的浏览器将在
元素和 <thead>、<tbody> 或 <tfooter> 之间创建幻表元素。

【解决方案2】：

给你的表格宽度 100%。

table{width: 100%;}

【讨论】：

谢谢！然而，这会延伸小桌子。
如果你喜欢给宽度一些值。