1. 首页
  2. 问答
  3. 令人讨厌的水平滚动条

令人讨厌的水平滚动条

2015-04-06 91 views
1

我想创建一个页面来滚动表格内容，即表头不随内容移动。令人讨厌的水平滚动条

它看起来不错，除了它有一个恼人的水平滚动条（在所有现代浏览器中）。

代码是在这里

div.title { 
 
    position: absolute; 
 
    top: 0px; 
 
    height: 97px; 
 
    width:100%; 
 
} 
 
div.tableHeader { 
 
    position: absolute; 
 
    top: 98px; 
 
    height: 23px; 
 
    overflow-y: scroll; 
 
    width:100%; 
 
} 
 
div.tableBody { 
 
    position: absolute; 
 
    top: 128px; 
 
    bottom: 0px; 
 
    width:100%; 
 
    overflow-x: auto; 
 
    overflow-y: scroll; 
 
} 
 
table.fixedHeader { 
 
    width: 100%; 
 
    text-align: left; 
 
} 
 
table.fixedHeader thead { 
 
    height: 21px; 
 
    background-color: #BFC2CC; 
 
} 
 
table.fixedHeader tr:nth-child(even) { 
 
    background-color: #ddd; 
 
} 
 
table.fixedHeader th:nth-child(1), table.fixedHeader td:nth-child(1) { 
 
    width: 250px; 
 
} 
 
table.fixedHeader th:nth-child(2), table.fixedHeader td:nth-child(2) { 
 
    width: 100px; 
 
} 
 
table.fixedHeader th:nth-child(3), table.fixedHeader th:nth-child(4), table.fixedHeader td:nth-child(3), table.fixedHeader td:nth-child(4) { 
 
    width: 60px; 
 
} 
 
table.fixedHeader th:nth-child(5), table.fixedHeader th:nth-child(6), table.fixedHeader th:nth-child(7), table.fixedHeader td:nth-child(5), table.fixedHeader td:nth-child(6), table.fixedHeader td:nth-child(7) { 
 
    width: 120px; 
 
} 
 
table.fixedHeader th:nth-child(8), table.fixedHeader td:nth-child(8) { 
 
    width: 80px; 
 
}
<body> 
 
    <div class="title"> 
 
     \t <h1> Demo how to set fixed table header</h1> 
 
    </div> 
 
    <div class="tableHeader"> 
 
     <table class="fixedHeader"> 
 
      <thead> 
 
       <tr> 
 
        <th>head1</th> 
 
        <th>head2</th> 
 
        <th>head3</th> 
 
        <th>head4</th> 
 
        <th>head5</th> 
 
        <th>head6</th> 
 
        <th>head7</th> 
 
        <th>head8</th> 
 
       </tr> 
 
      </thead> 
 
     </table> 
 
    </div> 
 
    <div class="tableBody"> 
 
     <table class="fixedHeader"> 
 
      <tr> 
 
       <td>Text 1111</td> 
 
       <td>Text Text</td> 
 
       <td>3333</td> 
 
       <td>4444</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text 2222</td> 
 
       <td>Text Text</td> 
 
       <td>3333</td> 
 
       <td>4444</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text 3333</td> 
 
       <td>Text Text</td> 
 
       <td>3333</td> 
 
       <td>4444</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text 4444</td> 
 
       <td>Text Text</td> 
 
       <td>3333</td> 
 
       <td>4444</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text 5555</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text 6666</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text 7777</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text 8888</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text 9999</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text aaaa</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text aaaa</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text bbbb</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text cccc</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text dddd</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text eeee</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text ffff</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text gggg</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text hhhh</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text iiii</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</body>

来源

2015-04-06 Justin

回答

1

添加在复位样式表或设置body { margin: 0; }以避免隐藏任何overflow.

来源

2015-04-06 21:13:20 Evan

+0

Evan，这个工作非常完美。非常感谢！ – Justin

+0

太棒了！是的，如果您决定不使用box-model，请清除特定边距或使用重置样式表，则必须将overflow-x设置为隐藏在表格或主体的父级上。 – Evan

0

尝试添加CSS溢出-X：隐藏;到桌上。

来源

2015-04-06 20:42:08

+0

水平滚动条不属于表格。我试过了，它不起作用。 – Justin

+0

好的，尝试添加“overflow-x：hidden;”为div.tableHeader。 –

0

其实你需要的是增加overflow-y: hidden;您.tableHeader DIV

这里更新的提琴http://jsfiddle.net/gcfurtqs/4/

来源

2015-04-06 20:47:29 Charbz

+0

我仍然看到水平滚动条 – Justin

+1

嗨，你看到的水平滚动条属于所以我更新了这里的小提琴http://jsfiddle.net/gcfurtqs/5/，但不建议不要把'overflow-x ：隐藏的身体，你最好将整个桌子包装在一个div中，并将其应用于包装 – Charbz

+0

Charbz，它适用于身体，谢谢！但它不能在任何div容器上运行 – Justin

相关问题

 相关问题