是否有一种方法可以将水平滚动条添加到HTML表中?我实际上需要它是可滚动的,垂直和水平取决于表如何增长,但我不能得到任何滚动条出现。


当前回答

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

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

其他回答

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

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

如前所述,使用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 style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

https://www.w3schools.com/howto/howto_css_table_responsive.asp

为此使用CSS属性“overflow”。

简短的总结:

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

e.g.

table {
    overflow: scroll;
}

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浏览器上都能使用这种方法。