问题与垂直滚动表头

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>