你试过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;
}

桌子上“超过100%的宽度”真的很适合我。

.table-wrap { 宽度:100%; 溢出:汽车; ｝ 表{ 表布局:固定; 宽度:200%; ｝

Edit: @WickyNilliams注意到，在表体上设置display: block将剥夺表的语义，因此由于可访问性问题，这不是一个很好的解决方案。

我对@Serge Stroobandt提出的解决方案取得了很好的成功，但我遇到了@Shevy的问题，这些单元格没有填满表的全宽度。我能够通过向tbody添加一些样式来修复这个问题。

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

table tbody {
  display: table;
  width: 100%;
}

我在Mac上的火狐、Chrome和Safari浏览器上都能使用这种方法。

如前所述，使用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>

这是对Serge Stroobandt的答案的改进，效果非常好。它解决了表没有填充整个页面宽度的问题，如果它有较少的列。

<style> 
 .table_wrapper{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
</style>

<div class="table_wrapper">
<table>
...
</table>
</div>