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

Question

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

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

Answer 1

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

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

例子小提琴

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

Answer 2

给你的桌子宽度 100%。

table{width: 100%;}