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

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

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

这对我来说很管用

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

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

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

这解决方案似乎有点过头了。最简洁的方法是像这样用div来包装:

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

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

为div元素添加标签表，style="overflow-x:auto"

<div style="overflow-x:auto">
<table class="table table-bordered">
    <thead>
        <tr>
            <th><b>Name</b></th>
            <th><b>Username</b></th>
            <th><b>Email</b></th>
            <th><b>Avatar</b></th>
            <th><b>Status</b></th>
            <th><b>Action</b></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>