将水平滚动条添加到html表


142

有没有一种方法可以将水平滚动条添加到HTML表格中?实际上,我需要它能够根据表的增长方式在垂直和水平方向上滚动,但我无法显示任何滚动条。


3
...想过将整个表格放在div中吗?...然后将滚动条添加到div?
矢量

3
也许是时候改变哪个答案成为公认的答案了?
Serge Stroobandt

Answers:


82

您是否尝试过CSS overflow属性?

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

更新
正如其他用户指出的那样,这不足以添加滚动条。
因此,请参阅下面的评论和答案。


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

21
@bloudermilk如果可以添加,则可以display: block
Cees Timmerman

244

首先, display: block桌子

然后设置overflow-x:auto

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

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

以下是涉及我网站上页面滚动表标题的更多示例


3
这在Chrome浏览器中对我有效,但只有在将所有东西都压在一起之后才能使用。white-space: nowrap;帮助立即查看滚动条。
Cees Timmerman

28
我实际上曾经尝试过。唯一的问题是表格单元格不再填满表格的整个宽度。
Shevy

4
就像其他人所说的那样,这不能正常工作:表格行不能填满表格宽度。
collimarco

1
@SergeStroobandt不,就我而言white-space: nowrap;,不能解决问题(在Firefox上测试)。当没有足够的内容(文本)来扩展行时,行宽小于表宽度。
collimarco

3
@collimarco注意,我必须将max-width:100%用于inline-block选项。
dogoncouch

40

将表格包裹在DIV中,样式设置如下:

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

8
似乎overflow:auto这里没有必要。无论如何,您是否知道在不设置宽度的情况下实现这一目标……这似乎始终是html中的解决方案-对某些宽度或高度进行硬编码,但这似乎击败了拥有布局引擎的意义!
JonnyRaa 2015年


11

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

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

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

这在Mac上的Firefox,Chrome和Safari中为我工作。


10

我无法获得上述任何解决方案。但是,我发现了一个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仍然会很好看。
MPEN

1
奇怪; 我完全在Firefox上使用了它,并且在那里工作了-尽管没有在此精确设置中使用。我想渲染一个由10 x 10 px divs组成的大网格,它具有折叠的边框和最大宽度+溢出x:自动似乎是关键。有了这些,一切看起来都很完美。另外,我根本不使用<table>,只使用div来显示:table,table-row和table-cell。
加布里埃尔

10

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

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

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

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


2

我根据以前的解决方案及其注释找出了答案,并添加了一些我自己的调整。这在响应表上对我有用。

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结构吗?
乔治,

我的意思是,我的意思是要添加更多的解释,以更好地理解它
-Mastisa

希望这个版本更加清晰。
乔治,

1

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

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

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


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

如果您打算演示某些内容,则缩进和样本数据会有所帮助。另外,您是说“滚动条”而不是“下降”吗?
Cees Timmerman
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.