将水平滚动条添加到html表

Question

有没有办法将水平滚动条添加到HTML表？我实际上需要它可以垂直和水平滚动,这取决于表的增长方式,但我不能让滚动条出现.

Answer 1

首先,做一个display: block你的桌子

然后,设置overflow-x:为auto.

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

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

以下是我网站上页面滚动表格标题的更多参与示例.

Answer 2

你尝试过CSS overflow属性吗？

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

更新
正如其他用户指出的那样,这还不足以添加滚动条.
所以请在下面查看并提出评论和答案.

Answer 3

将表包装在DIV中,使用以下样式进行设置:

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

Answer 4

为此使用CSS属性" overflow ".

简短的摘要:

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

例如

table {
    display: block;
    overflow: scroll;
}

Answer 5

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

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

Answer 6

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

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

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

Answer 7

我无法获得上述任何解决方案.但是,我找到了一个黑客:

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

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

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

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

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

Answer 9

将表格插入 div 内，以便表格具有完整长度

超文本标记语言

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

CSS

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

Answer 10

.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%ormax-content用于表。