使html表< thead>在动态< tbody>滚动时固定。在PHP中 [英] make html table <thead> fixed while scroll in dynamic <tbody> in php

问题描述

我在php中有动态表，其中< tbody> 内容是从数据库动态获取的，我希望使< thead> 固定滚动，我的代码在静态html < tbody> 中工作正常。

我的代码

 < div class =data> 
< table> 
< thead> 
< tr> 
 th page page Id< / th> 
< th>用户ID< / th> 
第页标题< / 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; 
背景：#fff; 
 z-index：1; 
 padding：50px; 
} 
 
 th，td {
 width：200px; 
 padding：3px; 
} 
 
 th {
 background：#ccc; 
} 
  

---

我的目标是表头的固定位置，而滚动和表体的内容从数据库使用PHP循环动态获取 我推荐你使用'头部固定器'js库（ https://github.com/lai32290/TableHeadFixer ）
fast和简单的方法，使表头/脚固定。

I have dynamic table in php where <tbody> content dynamically fetched from database, i want to make <thead> fixed while scroll, my code work fine in static html <tbody>.

Here is my code

<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>

Here is my 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;
}

---

My Goal is to make table head fixed position while scroll and the content of table body dynamic fetching from database using php loop

解决方案

I recommend you to use 'head fixer' js library (https://github.com/lai32290/TableHeadFixer) fast and easy way to make table head/foot fixed.

这篇关于使html表< thead>在动态< tbody>滚动时固定。在PHP中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！