向 HTML 表格添加水平滚动条

Question

有没有办法在 HTML 表格中添加水平滚动条？我实际上需要它可以垂直和水平滚动，具体取决于表格的增长方式，但我无法显示任何滚动条。

Answer 1

首先，为您的桌子创建一个display: block

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

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

干净整洁。没有多余的格式。

这是来自我网站页面的more involved examples with scrolling table captions。

如果出现有关单元格未填充整个表格的问题，请附加以下附加 CSS 代码：

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

Answer 2

你试过 CSS overflow 属性吗？

overflow: scroll; /* Scrollbar are always visible */
overflow: auto;   /* Scrollbar is displayed as it's needed */

更新
正如其他用户指出的那样，这还不够添加滚动条。
所以，请在下面查看并投票支持 cmets 和答案。

Answer 3

将表格包裹在一个 DIV 中，设置如下样式：

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

Answer 4

这是对Serge Stroobandt's 答案的改进，效果很好。它解决了表格列数较少时无法填满整个页面宽度的问题。

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

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

Answer 5

为此使用 CSS 属性“overflow”。

简短的总结：

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

例如

table {
    display: block;
    overflow: scroll;
}

Answer 6

编辑：@WickyNilliams 注意到在表格主体上设置 display: block 会剥离表格的语义，因此由于可访问性问题不是一个好的解决方案。

我在@Serge Stroobandt 提出的解决方案上取得了很好的成功，但我遇到了@Shevy 的问题，即单元格没有填满表格的整个宽度。我可以通过向tbody 添加一些样式来解决此问题。

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

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

这适用于我在 Mac 上的 Firefox、Chrome 和 Safari 中。

Answer 7

我无法让上述任何解决方案发挥作用。但是，我发现了一个 hack：

body {
  background-color: #ccc;
}

.container {
  width: 300px;
  background-color: white;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

/* try removing the "hack" below to see how the table overflows the .body */
.hack1 {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.hack2 {
  display: table-cell;
  overflow-x: auto;
  width: 100%;
}

<div class="container">

  <div class="hack1">
    <div class="hack2">

      <table>
        <tr>
          <td>table or other arbitrary content</td>
          <td>that will cause your page to stretch</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
      </table>

    </div>
  </div>

</div>

Answer 8

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

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

Answer 9

将表格插入到一个 div 中，这样表格就会占满整个长度

HTML

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

CSS

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

Answer 10

带引导

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

Answer 11

我根据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;
}

Answer 12

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

.table-wrap {
    width: 100%;
    overflow: auto;
}

table {
    table-layout: fixed;
    width: 200%;
}

Answer 13

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

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

Answer 14

//Representation of table
<div class="search-table-outter">
<table class="table table-responsive search-table inner">
</table>
</div>

//Css to make Horizontal Dropdown

<style>

    .search-table{table-layout: auto; margin:40px auto 0px auto; }
    .search-table, td, th {
        border-collapse: collapse;
    }
th{padding:20px 7px; font-size:15px; color:#444;}
td{padding:5px 10px; height:35px;}
    .search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }


</style>