首先，做一个显示:块你的表

然后，将overflow-x:设置为auto。

table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

又好又干净。没有多余的格式。

这里有更多涉及的例子，从我的网站上的一个页面滚动表标题。

如果一个关于单元格没有填充整个表的问题，附加以下额外的CSS代码:

table tbody {
    display: table;
    width: 100%;
}

不管怎样，我找到的最好答案是: https://github.com/filamentgroup/tablesaw/issues/58#issuecomment-63966574

table.tablesaw
{
    table-layout: fixed;
    max-width: none;
    width: auto;
    min-width: 100%;
}

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

这对我来说很管用

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

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

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

为此使用CSS属性“overflow”。

简短的总结:

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

e.g.

table {
    overflow: scroll;
}

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

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