hi can someone help me make my headers fixed and my table body be able to scroll vertically.
i have seen the javascript and css "display:block and overflow-y: auto; overflow-x: hidden;"
it just doesnt work with me .
<style>
.table{
width:100%;
border-collapse:collapse;
border:0px ;
cellspacing:5px;
cellpadding:5px;
margin-left:auto;
margin-right:auto;
max-width:70%;
border-color:#9DC45F;
}
.table tbody{
border-color:#9DC45F;
overflow-y: auto;
overflow-x: hidden;
}
.table th{
background-color: #9DC45F;
color: white;
border:1px;
cellspacing:2px;
cellpadding:1px;
width:5%;
}
.table td{
padding:7px;
border:#9DC45F 1px solid;
}
.table tr{
background-color:#9DC45F;
height:30px;
border-color:#9DC45F;
}
.table tr:nth-child(odd){
background-color:#999;
height:30px;
border-color:#9DC45F;
}
.table tr:nth-child(even){
background:#CCC;
}
</style>
<script>
var $table = $('table'),
$bodyCells = $table.find('tbody').children(),
colWidth;
$(window).resize(function() {
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
$table.find('thead').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
}).resize();
</script>
<body>
<table class="table">
<thead>
<th>Date</th>
<th>Ref</th>
<th>Name</th>
<th>Bbf</th>
<th>Tel</th>
<th>Email</th>
<th>Product</th>
</thead>
<tbody >
<?php
$sql = "Select * from table ";
$rs = mysqli_query($conn,$sql);
while ($row = mysqli_fetch_assoc($rs)) {
echo '<tr>';
echo '<td >'.$row['date'].'</td> ';
echo '<td >'.$row['ref'].'</td>';
echo '<td >'.$row['name'].'</td>';
echo '<td >'.$row['bbf'].'</td>';
echo '<td >'.$row['tel'].'</td>';
echo '<td >'.$row['email'].'</td>';
echo '<td >'.$row['product'].'</td>';
echo '</tr>';
}
?>
</tbody>
</table>
</body>