是否有一种方法可以将水平滚动条添加到HTML表中?我实际上需要它是可滚动的，垂直和水平取决于表如何增长，但我不能得到任何滚动条出现。
当前回答
你试过CSS溢出属性了吗?
overflow: scroll; /* Scrollbar are always visible */
overflow: auto; /* Scrollbar is displayed as it's needed */
更新 正如其他用户指出的那样，仅仅添加滚动条是不够的。 所以，请参阅下面的评论和回答并投票。
其他回答
你试过CSS溢出属性了吗?
overflow: scroll; /* Scrollbar are always visible */
overflow: auto; /* Scrollbar is displayed as it's needed */
更新 正如其他用户指出的那样，仅仅添加滚动条是不够的。 所以，请参阅下面的评论和回答并投票。
将表格插入到div中，这样表格就会有完整的长度
HTML
<div class="scroll">
<table> </table>
</div>
CSS
.scroll{
overflow-x: auto;
white-space: nowrap;
}
这个答案是我根据之前的解决方案和它的评论得出的，并添加了我自己的一些调整。这在响应式桌子上很适合我。
table {
display: inline-block;
overflow-x: auto;
white-space: nowrap;
// make fixed table width effected by overflow-x
max-width: 100%;
// hide all borders that make rows not filled with the table width
border: 0;
}
// add missing borders
table td {
border: 1px solid;
}
我也遇到了同样的问题。我发现了下面的解决方案，它只在Chrome v31中测试过:
table {
table-layout: fixed;
}
tbody {
display: block;
overflow: scroll;
}
如前所述，使用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>
