問題與垂直滾動表頭

Question

有在我的表頭是不是與我的表中的數據正確對齊的問題，實現垂直滾動條，像這樣經過：

.tbody{ 
    height: 250px; 
    overflow-y: auto; 
    overflow-x: hidden; 
    display: block; 
} 

.table{ 
    width: 100%; 
    border-collapse: collapse; 
    display: table; 
} 

.table_header_row{ 
    display: block; 
} 

Example of how the web page looks with skewed table headers

Example of how its supposed to look without the vertical scrollbar

無論如何，解決這樣的問題，最好只使用CSS？

Answer 1

一個簡單的方法是通過你的頭設置爲絕對位置

CSS

.yourTableClass { 
      position:relative; 
      overflow:hidden; 
     } 
      .yourTableClass thead { 
       position:absolute; /*order fixed to freeze the header*/ 
       top:0px; 
       left:0px; 
       right:0px; 
      } 

HTML：

<table class="yourTableClass"> 
    <thead> 
     <tr> 
      <td>one</td> 
      <td>two</td> 
      <td>three</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
     </tr> 
    </tbody> 
</table>