向 HTML 表格添加水平滚动条

Posted 2023-02-21

【中文标题】向 HTML 表格添加水平滚动条

【英文标题】：Add a horizontal scrollbar to an HTML table

【发布时间】：2011-07-28 20:45:51

【问题描述】：

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

【问题讨论】：

...想过把整个表格放在一个 div 中吗？ ...然后将滚动添加到 div？

也许是时候改变哪个答案成为接受的答案了？

【参考方案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%;

【讨论】：

这适用于我在 Chrome 中，但只有在将所有内容压缩在一起之后。 white-space: nowrap; 有助于立即看到滚动条。

我之前确实试过这个。唯一的问题是表格单元格不再填满表格的整个宽度。

正如其他人所说，这不能正常工作：表格行没有填满表格宽度。

@SergeStroobandt 不，在我的情况下 white-space: nowrap; 不能解决问题（在 Firefox 上测试）。当没有足够的内容（文本）来扩展行时，行宽小于表格宽度。

@collimarco 注意我必须使用 max-width: 100% 作为 inline-block 选项。

【参考方案2】：

你试过 CSS overflow 属性吗？

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

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

【讨论】：

根据我自己的尝试以及我在互联网上阅读的所有其他内容，这根本行不通。当然，您可以溢出包装元素，但不能溢出表格本身。

@bloudermilk 添加display: block即可。

不要在表格上设置display: block - 令人惊讶的是它剥夺了它们的语义！这会损害可访问性并使屏幕阅读器用户的生活变得困难。见这里developer.paciellogroup.com/blog/2018/03/…

哇...所以我很难在移动视图中显示表格，因为它弄乱了我的整个手机布局。谢谢@CeesTimmerman。它解决了我的问题

【参考方案3】：

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

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

【讨论】：

看来这里的overflow:auto 是不必要的。您是否知道在不设置宽度的情况下实现这一点...这似乎总是 html 中的解决方案 - 硬编码一些宽度或高度，但这似乎与拥有布局引擎的意义相悖！

【参考方案4】：

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

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

</style>

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

【讨论】：

white-space: nowrap; 似乎是可选的。

太棒了！用 div wrapper 代替 table 的样式，解决了 table 列少时不能填满整个页面宽度的问题。

看来不需要display: block;

【参考方案5】：

为此使用 CSS 属性“overflow”。

简短的总结：

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

例如

table 
    display: block;
    overflow: scroll;

【讨论】：

提供的链接已损坏

【参考方案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 中。

【讨论】：

不要在表格上设置display: block - 令人惊讶的是它剥夺了它们的语义！这会损害可访问性并使屏幕阅读器用户的生活变得困难。见这里developer.paciellogroup.com/blog/2018/03/…

哎呀，不知道！感谢@WickyNilliams 提供的信息。

这是非常令人惊讶的行为！

【参考方案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>

【讨论】：

以上都没有对我有用，但确实如此。不错，谢谢。

@Gábriel 很高兴它对你有用。我刚才在 Firefox 中再次尝试了它，它似乎没有正确呈现:-( i.imgur.com/BcjSaCV.png Chrome 看起来仍然不错。

奇怪；我完全在 Firefox 上使用它并且它在那里工作 - 尽管不是在这个确切的设置中。我想渲染一个由 10 x 10 px div 组成的大网格，其中包含折叠的边框和最大宽度 + overflow-x: auto 似乎是关键。有了这些，一切看起来都很完美。另外，我根本不使用 ，只使用 div，显示：table、table-row 和 table-cell。

【参考方案8】：

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

table 
    table-layout: fixed;


tbody 
    display: block;
    overflow: scroll;

【讨论】：

table-layout: fixed is nice.

【参考方案9】：

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

HTML

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

CSS

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

【讨论】：

这对我有用。我通常会避免更改 HTML，但在这种情况下会更容易

【参考方案10】：

带引导

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

【参考方案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;

【讨论】：

@Saeed 你的意思是像 html 结构吗？

我的错，我的意思是添加更多解释，以帮助更好地理解它

希望这个版本更加清晰。

【参考方案12】：

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

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


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

【参考方案13】：

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

table.tablesaw

    table-layout: fixed;
    max-width: none;
    width: auto;
    min-width: 100%;

【参考方案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-tabletable-layout: auto; margin:40px auto 0px auto; 
    .search-table, td, th 
        border-collapse: collapse;
    
thpadding:20px 7px; font-size:15px; color:#444;
tdpadding:5px 10px; height:35px;
    .search-table-outter  overflow-x: scroll; 
th, td  min-width: 200px; 


</style>

【讨论】：

如果您打算演示某些东西，缩进和示例数据会有所帮助。另外，您的意思是“滚动条”而不是“下拉菜单”吗？