I need to freeze the first row for the below table, here's my current code below Please let me know if you need anymore information
Here's an image of the table:
<head>
<style>
table,td,th
{border-collapse:collapse;}
table.myTable td, table.myTable th { border:1px solid black;padding:5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#2C3539;
font-size:0.80em}
table
{width:100%;}
th{background-color:#B6B6B4;
height:10px;}
</style>
<table class="myTable">
<?php
//MySQL Database Connect
include 'connect.php';
echo "
<tr>
<th>Name</th>
<th>Location</th>
<th>Email</th>
<th>Mobile</th>
<th>IMEI</th>
<th>Phone</th>
<th>Message</th>
</tr></Freezing>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['Name'] . "</td>";
echo "<td>" . $row['Location'] . "</td>";
echo "<td>" . $row['Email'] . "</td>";
echo "<td>" . $row['Mobile'] . "</td>";
echo "<td>" . $row['IMEI'] . "</td>";
echo "<td>" . $row['Phone'] . "</td>";
echo "<td>" . $row['Message'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
What you could do instead is use the <thead>
to segment your <th>
tags. Then you could use either absolute of fixed positioning to have that section float above the others. Here is an example:
HTML
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th>Email</th>
<th>Mobile</th>
<th>IMEI</th>
<th>Phone</th>
<th>Message</th>
</tr>
</thead>
<tbody>
...
</tbody>
CSS
thead {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%
z-index: 100;
}
You may also need to add some padding to the top of the <tbody>
tag so that the frozen row does not sit over top of any data. Additionally, absolute positioning will be relative to the nearest positioned ancestor, so you may need to add a position to the table as well.
table {
position: relative;
}
tbody {
padding-top: 1em;
}
try this it's using jquery though Freeze Header