0

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

Cœur
  • 37,241
  • 25
  • 195
  • 267
Goarge Go
  • 57
  • 1
  • 8

1 Answers1

0

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

rokas
  • 1,521
  • 9
  • 16