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


当前回答

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

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

其他回答

这对我来说很管用

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

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

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

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

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

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

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

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

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

.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作为表。