向 HTML 表格添加水平滚动条

问题描述 投票：0回答：20

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

html css html-table scrollbar
20个回答
437
投票

首先，制作一个
display: block
你的桌子

然后，将 

overflow-x:
设置为 
auto
。

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

又漂亮又干净。没有多余的格式。

这里有更多带有滚动表格标题的示例来自我网站上的页面。

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

table tbody {
    display: table;
    width: 100%;
}
99
投票

你尝试过 CSS 

overflow
属性吗？

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

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

47
投票

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

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

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

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

<div class="table_wrapper">
<table>
...
</table>
</div>
25
投票

为此使用 CSS 属性“overflow”。

简短摘要：

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

例如

table {
    overflow: scroll;
}
20
投票

编辑：@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 中有效。

12
投票

我无法使上述任何解决方案发挥作用。然而，我发现了一个黑客：

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>

9
投票

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

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}
5
投票

将表格插入 div 内，这样表格将占据完整长度

HTML

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

CSS

.scroll{
    overflow-x: auto;
    white-space: nowrap;
}
5
投票
.wrapper {
  width: 0;
  min-width: 100%; //width 0, but min-width 100?? yes, I know...
  overflow: auto;
}

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


table
可以有任何 
width
。我通常在桌子上使用 
100%
或 
max-content
。

4
投票

这对我有用

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

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

<div class="wrapper">
   <table>...</table>
</div>
3
投票

我根据之前的解决方案及其评论找到了这个答案，并添加了我自己的一些调整。这在响应式桌子上对我有用。

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;
}
3
投票

解决方案似乎有点过头了。最干净的方法就是用 div 包裹它，如下所示：

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

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

2
投票

桌子上的“超过 100% 宽度”确实对我有用。

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

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

2
投票

带引导程序

 <div class="table-responsive">
   <table class="table">
     ...
   </table>
 </div>
1
投票

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

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

使用 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>
0
投票

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

如果我们将 

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

我能够通过将 

overflow-x: auto
添加到表格的主体包装来实现预期的行为。

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

0
投票

就像已经说过的，在桌子上使用 

display:block;
是不好的。我尝试了该线程中的大部分答案，但没有一个能达到我想要的效果。如果您的 HTML 结构如下：

<div>
  <table>
    <tbody>

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

.text-left {text-align:left;} /* Ignore */

.x-auto {
  overflow-x: auto;
}

.table {
  text-align: left;
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
}

.table tbody {
  display: table;
  width: 100%;
}
<div class="x-auto">
  <table class="table text-left">
    <tbody>
      <tr>
        <th>Head1</th>
        <th>Head2</th>
      </tr>
      <tr>
        <td>Some short text!</td>
        <td>Some really long text, like really really really really really really really really really really really really long!</td>
      </tr>
    </tbody>
  </table>
</div>

-3
投票

表格表示法

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

CSS 制作水平下拉菜单

<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.