Fixed the table header with a scrolling panel - php

Question

I know this is a duplicate question and I've tried every possible solution but not succeeded. I am using a panel in which my excel data is showing and I wanna fix the column in other words header. Every css I've tried break the panel settings and I didn't succeed. I'm using bootstrap css & have more than 1000 rows that's why I need a fixed header.
This is my HTML
<div class="panel panel-primary">
<div class="panel-heading">Excel Sheet</div>
<div class="panel-body">
<?php
echo '<table class="table table-striped table-hover table-condensed">';
echo "<thead class='thead'>";
echo "<tr class='info'>";
for ($column = 'A'; $column < $lastcol; $column++) {
echo "<th>";
echo $worksheet->getCell($column . '1')->getFormattedValue();
echo "</th>";
}
echo "</tr>";
echo '</thead>';
echo '<tbody>';
for ($row = 2; $row <= $lastrow; $row++) {
echo "<tr>";
for ($column = 'A'; $column < $lastcol; $column++) {
echo "<td>";
echo $worksheet->getCell($column . $row)->getFormattedValue();
echo "</td>";
}
echo "</tr>";
}
echo '</tbody>';
echo "</table>";
?>
</div>
</div>
Here is column and row 1 are for loop, which will give the header. I have used integrated php-html. Other rows will appear in row for loop.
this is my css and commented code is last code i have tried.
.panel-heading{
font-size: 15px;
}
.panel-body{
overflow:auto;
height:400px;
}
tr{
border: 1px solid black;
}
th{
border: 1px solid black;
}
td{
border: 1px solid black;
}
example fiddle is Here
P.S : Please dont forget to place a comment in case of negative vote for helping me . Cheers !

Answer 1

Try adding the below CSS to your .panel-primary:
.panel-primary{
top: 0;
}
This should do it.
Hope it helps.

Answer 2

You can make this with Jquery. I check the width of each first td for define each th width.
$(document).ready(function(){
resized();
})
$(window).resize(function(){
resized()
})
function resized(){
var widthTd1 = $("td:eq(0)").width();
var widthTd2 = $("td:eq(1)").width();
var widthTd3 = $("td:eq(2)").width();
var TDPadding = 11; // = padding + border
var widthTH1 = widthTd1 + TDPadding;
var widthTH2 = widthTd2 + TDPadding;
var widthTH3 = widthTd3 + TDPadding;
$("th:eq(0)").css({width:widthTH1 })
$("th:eq(1)").css({width:widthTH2 })
$("th:eq(2)").css({width:widthTH3 })
}
$(".panel-body").on("scroll",function(){
$(".info").offset({top:58})
})
.panel-primary {
top: 0;
}
.panel-heading {
font-size: 15px;
}
.panel-body {
overflow: auto;
height: 400px;
padding:0 !important;
margin:15px
}
.info{
position:absolute;
left:-1px;
}
.table{
position:relative;
}
tbody::before {
content: "-";
display: block;
line-height: 2em;
}
th {
border: 1px solid black;
}
td {
border: 1px solid black;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-primary">
<div class="panel-heading">Excel Sheet</div>
<div class="panel-body">
<table class="table table-striped table-hover table-condensed">
<thead class='thead'>
<tr class='info'>
<th>
Qc Code
</th>
<th>
Sample ID
</th>
<th>
Date
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
SE68
</td>
<td>
GC57052
</td>
<td>
1/2/15 17:24
</td>
</tr>
<tr>
<td>
SE68
</td>
<td>
GC57052
</td>
<td>
1/2/15 17:24
</td>
</tr>
<tr>
<td>
SE68
</td>
<td>
GC57052
</td>
<td>
1/2/15 17:24
</td>
</tr>
<tr>
<td>
SE68
</td>
<td>
GC57052
</td>
<td>
1/2/15 17:24
</td>
</tr>
<tr>
<td>
SE68
</td>
<td>
GC57052
</td>
<td>
1/2/15 17:24
</td>
</tr>
<tr>
<td>
SE68
</td>
<td>
GC57052
</td>
<td>
1/2/15 17:24
</td>
</tr>
<tr>
<td>
SE68
</td>
<td>
GC57052
</td>
<td>
1/2/15 17:24
</td>
</tr>
<tr>
<td>
SE68
</td>
<td>
GC57052
</td>
<td>
1/2/15 17:24
</td>
</tr>
<tr>
<td>
SE68
</td>
<td>
GC57052
</td>
<td>
1/2/15 17:24
</td>
</tr>
<tr>
<td>
SE68
</td>
<td>
GC57052
</td>
<td>
1/2/15 17:24
</td>
</tr>
<tr>
<td>
SE68
</td>
<td>
GC57052
</td>
<td>
1/2/15 17:24
</td>
</tr>
<tr>
<td>
SE68
</td>
<td>
GC57052
</td>
<td>
1/2/15 17:24
</td>
</tr>
<tr>
<td>
SE68
</td>
<td>
GC57052
</td>
<td>
1/2/15 17:24
</td>
</tr>
<tr>
<td>
SE68
</td>
<td>
GC57052
</td>
<td>
1/2/15 17:24
</td>
</tr>
</tbody>
</table>
</div>
</div>