1. 首頁
  2. 問答
  3. 令人討厭的水平滾動條

令人討厭的水平滾動條

2015-04-06 125 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

相關問題

 相關問題