向 HTML 表格添加水平滚动条

我遇到了同样的问题。我发现了以下解决方案，该解决方案仅在 Chrome v31 中进行了测试：

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

将表格插入到 div 中，因此表格将占据全长

HTML

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

CSS

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

带引导程序

 <div class="table-responsive">
   <table class="table">
     ...
   </table>
 </div>

我根据 previous solution and it's comment 找出了这个答案，并添加了我自己的一些调整。这在响应式表上对我有用。

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%； }

使用 style="overflow-x:auto" 将标签表添加到 div 元素

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

这对我有用

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

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

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

对于它的价值，我找到的最佳答案在这里：https://github.com/filamentgroup/tablesaw/issues/58#issuecomment-63966574

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

我尝试了上述所有解决方案，但遇到了一些问题。

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

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

即使列较少，单元格也会占据全宽，并且会根据需要自动显示滚动条。

如前所述，在桌子上使用 display:block; 是不好的。我尝试了此线程中的大多数答案，但没有一个按我的意愿工作。如果您的 HTML 结构如下：

<div>
  <table>
    <tbody>

并且您希望父 div 可以水平滚动，您可以尝试以下操作：

.text-left {text-align:left;} /* 忽略 */ .x-auto { overflow-x: auto; } .table { 文本对齐：左；表格布局：固定；宽度：100%；空白：nowrap； } .table tbody { 显示：表；宽度：100%； }