为此使用CSS属性“overflow”。

简短的总结:

overflow: visible|hidden|scroll|auto|initial|inherit;

e.g.

table {
    overflow: scroll;
}

我也遇到了同样的问题。我发现了下面的解决方案，它只在Chrome v31中测试过:

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

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

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>

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

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

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

.wrapper {
  width: 0;
  min-width: 100%; //width 0, but min-width 100?? yes, I know...
  overflow: auto;
}

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

表可以有任何宽度。我通常使用100%或max-content作为表。