我不能让上面的任何解决方案工作。然而，我发现了一个黑客:

body { background-color: #ccc; } .container { width: 300px; background-color: white; } table { width: 100%; border-collapse: collapse; } td { border: 1px solid black; } /* try removing the "hack" below to see how the table overflows the .body */ .hack1 { display: table; table-layout: fixed; width: 100%; } .hack2 { display: table-cell; overflow-x: auto; width: 100%; } <div class="container"> <div class="hack1"> <div class="hack2"> <table> <tr> <td>table or other arbitrary content</td> <td>that will cause your page to stretch</td> </tr> <tr> <td>uncontrollably</td> <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td> </tr> </table> </div> </div> </div>

用下面的样式将表格包装成DIV:

div.wrapper {
  width: 500px;
  height: 500px;
  overflow: auto;
}

你试过CSS溢出属性了吗?

overflow: scroll; /* Scrollbar are always visible */
overflow: auto;   /* Scrollbar is displayed as it's needed */

更新 正如其他用户指出的那样，仅仅添加滚动条是不够的。 所以，请参阅下面的评论和回答并投票。

这对我来说很管用

.wrapper {
  overflow-x: auto;
  white-space: nowrap;
}

.wrapper table {
  width: auto;
  min-width: 100%;
}

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

与引导

 <div class="table-responsive">
   <table class="table">
     ...
   </table>
 </div>

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