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


当前回答

与引导

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

其他回答

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

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

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

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

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

这个答案是我根据之前的解决方案和它的评论得出的,并添加了我自己的一些调整。这在响应式桌子上很适合我。

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;
}

你试过CSS溢出属性了吗?

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

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