是否有一种方法可以将水平滚动条添加到HTML表中?我实际上需要它是可滚动的，垂直和水平取决于表如何增长，但我不能得到任何滚动条出现。
当前回答
如前所述，使用display:block;在桌子上是坏的。我尝试了这个帖子中的大多数答案，没有一个像我想要的那样有效。如果你的HTML是这样结构的:
<div>
<table>
<tbody>
你想让父div水平滚动，你可以试试下面的方法:
.text-left {text-align:left;} /* Ignore */ .x-auto { overflow-x: auto; } .table { text-align: left; table-layout: fixed; width: 100%; white-space: nowrap; } .table tbody { display: table; width: 100%; } <div class="x-auto"> <table class="table text-left"> <tbody> <tr> <th>Head1</th> <th>Head2</th> </tr> <tr> <td>Some short text!</td> <td>Some really long text, like really really really really really really really really really really really really long!</td> </tr> </tbody> </table> </div>
其他回答
首先，做一个显示:块你的表
然后，将overflow-x:设置为auto。
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
又好又干净。没有多余的格式。
这里有更多涉及的例子，从我的网站上的一个页面滚动表标题。
如果一个关于单元格没有填充整个表的问题，附加以下额外的CSS代码:
table tbody {
display: table;
width: 100%;
}
我也遇到了同样的问题。我发现了下面的解决方案，它只在Chrome v31中测试过:
table {
table-layout: fixed;
}
tbody {
display: block;
overflow: scroll;
}
这是对Serge Stroobandt的答案的改进，效果非常好。它解决了表没有填充整个页面宽度的问题，如果它有较少的列。
<style>
.table_wrapper{
display: block;
overflow-x: auto;
white-space: nowrap;
}
</style>
<div class="table_wrapper">
<table>
...
</table>
</div>
与引导
<div class="table-responsive">
<table class="table">
...
</table>
</div>
用下面的样式将表格包装成DIV:
div.wrapper {
width: 500px;
height: 500px;
overflow: auto;
}
