Chrome固定table表头thead，表体tbody滚动

主要是宽度（高度自行调整，表格样式自己调整）：表头thead与表体tbody宽度必须一一对应相等的宽度，否则会走形，长短不一；

（一般滚动条的宽度是30px左右，所以我设定table宽度比表头表体大30px;）

jsp/html:

<div id="data" style="margin-right: 5px; height: 100%; overflow-y: hidden;">            
 <table id="datalist" style="width: 830px; height: 95.5%; margin-bottom: 10px;">
  <thead id="thead">
  <tr>

       <th style="width: 100px;">A</th>

   <th style="width: 50px;">B</th>

        <th style="width: 100px;">C</th>
   <th style="width: 150px;">D</th>
        <th style="width: 100px;">E</th>
   <th style="width: 20px;">F</th>
        <th style="width: 180px;">G</th>
   <th style="width: 100px;">H</th>
  </tr>
  </thead>                      
  <tbody id="tbody"> 
  <tr>
        <td style="width: 100px;">1</td>
   <td style="width: 50px;">2</td>
        <td style="width: 100px;">3</td>
   <td style="width: 150px;">4</td>
        <td style="width: 100px;">5</td>
   <td style="width: 20px;">6</td>
        <td style="width: 180px;">7</td>
   <td style="width: 100px;">8</td>
  </tr>
  ..................................
  </tbody>
 </table>

</div>

css:

样式的宽度和表格的thead，tbody宽度，最好指定相等（不指定也行，本人都是指定的）

table tbody {  
    display:block;  
    height:98%;  
    overflow-y:scroll; 
}  
table thead,tbody tr  {  
    display:table;  
    width:800px;  
    table-layout:fixed;
}
table thead{
    width: calc( 800px - 1em )  
}

完