我尝试了以上所有的解决方案，但都有一些问题。

如果我们添加display: 'block'到表格中，单元格不会占用整个宽度。 如果我们将它添加到表包装器中，你的自定义表头，如搜索，过滤器等也会滚动，这看起来很糟糕。

我能够通过将overflow-x: 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;
}

将表格插入到div中，这样表格就会有完整的长度

HTML

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

CSS

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

我也遇到了同样的问题。我发现了下面的解决方案，它只在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;
}