如何使用纯css代码实现一个table表头固定的效果呢?


摘要:
下文讲述css代码实现表头固定的方法分享,如下所示;

table固定表头,是我们常见的一种需求,那么如何使用css实现呢?

实现思路:
    使用position: sticky;对表头进行定位,即可实现固定表头的效果

例:

 <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>


 <style>  
.table-container {
  width: 100%;
  height: 100%;
 /* overflow: auto; 注意此属性不可使用
  否则position:sticky属性失效
 */
}
 
/* table(表)头固定 */
.table-container thead tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  color:white;background-color:green;
} 
</style>
<P>
maomao365.com <br />
纯css实现表头固定的示例分享
</p>
<hr /> 

<div class="table-container" > 
 <table border="1">
<thead>
   <tr><th>keyId<th>编号</tr>
</thead>
<tbody>  
 <tr><td>1<td>编号</tr>
   <tr><td>2<td>猫猫教程</tr>
   <tr><td>3<td>maomao365.com</tr>
     <tr><td>4<td>猫猫教程</tr>
   <tr><td>5<td>猫猫教程</tr>
   <tr><td>6<td>猫猫教程</tr>
  <tr><td>7<td>猫猫教程</tr>
   <tr><td>8<td>猫猫教程</tr>
   <tr><td>9<td>猫猫教程</tr>
  <tr><td>10<td>猫猫教程</tr>
   <tr><td>11<td>猫猫教程</tr>
   <tr><td>12<td>猫猫教程</tr>
  <tr><td>13<td>猫猫教程</tr>
   <tr><td>14<td>猫猫教程</tr>
   <tr><td>15<td>猫猫教程</tr>
  <tr><td>16<td>猫猫教程</tr>
   <tr><td>17<td>猫猫教程</tr>
   <tr><td>18<td>猫猫教程</tr>
  <tr><td>19<td>猫猫教程</tr>
   <tr><td>20<td>猫猫教程</tr>
   <tr><td>21<td>编号</tr>
</tbody>
</table>   
</div>
  
纯css代码固定表头的示例分享

纯css代码固定表头的示例分享