在 <thead> PHP 中动态滚动时修复 HTML 表格<tbody>

Question

我在php中有动态表，其中<tbody>内容动态地从数据库中获取，我想使<thead>固定而滚动，我的代码在静态html <tbody>中工作良好。

我的代码

<div class="data">
  <table>
      <thead>
        <tr>
          <th>Page Id</th>
          <th>User Id</th>
          <th>Page Title</th>
        </tr>
      </thead>
      <?php
        foreach($this->analysisL as $key => $value) {?>
      <tbody>
        <tr>
          <td><?php echo $value['daily_clicks']?></td>
          <td><?php echo $value['RDCL']?></td>
          <td><?php echo $value['SDCL']?></td>
        </tr>
      </tbody>
      <?php }?>
    </table>
  </div>

这是我的css

body{
font-family: sans-serif;
}
h1{
font-size: 2em;
}
p{
margin-top: 1em;
}
div{
padding: 0 50px
}
.data{
position: fixed;
top: 0;  
z-index: 0;
}
.content{
position: relative;
background: #fff; 
z-index: 1;
padding: 50px;
}
th,td{
width: 200px;
padding: 3px;
}
th{
background: #ccc;
}

---

我的目标是使表头固定位置，而滚动和表体的内容动态获取从数据库使用php循环

Answer 1

我建议你使用'head fixer' js库(https://github.com/lai32290/TableHeadFixer)快速简便的方法使桌头/桌脚固定