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

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

我能够通过将overflow-x: auto添加到表的主体包装器来实现预期的行为。

单元格采用全宽度，即使列较少，滚动条也会根据需要自动出现。

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

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

为此使用CSS属性“overflow”。

简短的总结:

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

e.g.

table {
    overflow: scroll;
}

为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>

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

HTML

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

CSS

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

这是对Serge Stroobandt的答案的改进，效果非常好。它解决了表没有填充整个页面宽度的问题，如果它有较少的列。

<style> 
 .table_wrapper{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
</style>

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