I have a table with many rows, for which I want to overlay a fixed table header when scrolling. The layout of the page is responsive with a fixed with left hand menu that can have 1 of 2 fixed widths. I am having problems aligning the columns in the fixed header with the table.
As per this fiddle
body {
width: 1519px;
}
#fixedheader {
width: calc (100% - 100px);
}
#contenttable {
width: 100%;
}
#fixedheader {
width: calc(100% - 100px);
position: fixed;
top: 300px;
border: 1px solid black;
background-color: yellow;
}
.donor_name_header {
width: calc((100% - 100px)/5);
}
.total_row_header,
.total_variance_header {
width: calc((100% - 100px)/10);
}
.bar0 {
background-color: #CCFFCC;
}<body>
<table>
<tbody>
<tr>
<td style="100px">Left column, width may change between 2 values</td>
<td style="position: relative;">
<table id="fixedheader">
<thead>
<tr>
<th style="width:20%;">
<!--placehold header row in data block-->
</th>
<th style="width: 5.8333333333333%">
Jan 17 </th>
<th style="width: 5.8333333333333%">
Feb 17 </th>
<th style="width: 5.8333333333333%">
Mar 17 </th>
<th style="width: 5.8333333333333%">
Apr 17 </th>
<th style="width: 5.8333333333333%">
May 17 </th>
<th style="width: 5.8333333333333%">
Jun 17 </th>
<th style="width: 5.8333333333333%">
Jul 17 </th>
<th style="width: 5.8333333333333%">
Aug 17 </th>
<th style="width: 5.8333333333333%">
Sep 17 </th>
<th style="width: 5.8333333333333%">
Oct 17 </th>
<th style="width: 5.8333333333333%">
Nov 17 </th>
<th style="width: 5.8333333333333%">
Dec 17 </th>
<th style="width:10%;">
Total
<!--placehold header row in data block-->
</th>
<th style="width:10%;">
<!--placehold header row in data block-->
</th>
</tr>
</thead>
</table>
<table id="contenttable">
<thead>
<tr>
<th style="width:20%;">
<!--placehold header row in data block-->
</th>
<th style="width: 5.8333333333333%">
Jan 17 </th>
<th style="width: 5.8333333333333%">
Feb 17 </th>
<th style="width: 5.8333333333333%">
Mar 17 </th>
<th style="width: 5.8333333333333%">
Apr 17 </th>
<th style="width: 5.8333333333333%">
May 17 </th>
<th style="width: 5.8333333333333%">
Jun 17 </th>
<th style="width: 5.8333333333333%">
Jul 17 </th>
<th style="width: 5.8333333333333%">
Aug 17 </th>
<th style="width: 5.8333333333333%">
Sep 17 </th>
<th style="width: 5.8333333333333%">
Oct 17 </th>
<th style="width: 5.8333333333333%">
Nov 17 </th>
<th style="width: 5.8333333333333%">
Dec 17 </th>
<th style="width:10%;">
Total&n
<table id="fixedheader" style="display: none;">
<thead>
<tr>
<th style="width:20%;">
<!--placehold header row in data block-->
</th>
<th style="width: 5.8333333333333%">
Jan 17 </th>
<th style="width: 5.8333333333333%">
Feb 17 </th>
<th style="width: 5.8333333333333%">
Mar 17 </th>
<th style="width: 5.8333333333333%">
Apr 17 </th>
<th style="width: 5.8333333333333%">
May 17 </th>
<th style="width: 5.8333333333333%">
Jun 17 </th>
<th style="width: 5.8333333333333%">
Jul 17 </th>
<th style="width: 5.8333333333333%">
Aug 17 </th>
<th style="width: 5.8333333333333%">
Sep 17 </th>
<th style="width: 5.8333333333333%">
Oct 17 </th>
<th style="width: 5.8333333333333%">
Nov 17 </th>
<th style="width: 5.8333333333333%">
Dec 17 </th>
<th style="width:10%;">
Total
<!--placehold header row in data block-->
</th>
<th style="width:10%;">
<!--placehold header row in data block-->
</th>
</tr>
</thead>
</table>bsp;
<!--placehold header row in data block-->
</th>
<th style="width:10%;">
<!--placehold header row in data block-->
</th>
</tr>
</thead>
<tbody>
<tr class="each_donor">
<td class="donor_name none" rowspan="2" style="width: 20%;">
<p> First Last</p>
<p>First & Other Last</p>
</td>
<td class="detail_month" style="width: 5.8333333333333%">
<span class="variance"><sup> </sup></span>
</td>
<td class="detail_month" style="width: 5.8333333333333%">
<span class="variance"><sup> </sup></span>
</td>
<td class="detail_month" style="width: 5.8333333333333%">
<span class="variance"><sup> </sup></span>
</td>
<td class="detail_month" style="width: 5.8333333333333%">
<span class="variance"><sup> </sup></span>
</td>
<td class="detail_month" style="width: 5.8333333333333%">
<span class="variance"><sup> </sup></span>
</td>
<td class="detail_month" style="width: 5.8333333333333%">
<span class="variance"><sup> </sup></span>
</td>
<td class="detail_month" style="width: 5.8333333333333%">
<span class="variance"><sup> </sup></span>
</td>
<td class="detail_month" style="width: 5.8333333333333%">
<span class="variance"><sup> </sup></span>
</td>
<td class="detail_month" style="width: 5.8333333333333%">
<span class="variance"><sup> </sup></span>
</td>
<td class="detail_month" style="width: 5.8333333333333%">
<span class="variance"><sup> </sup></span>
</td>
<td class="detail_month" style="width: 5.8333333333333%">
<span class="variance"><sup> </sup></span>
</td>
<td class="detail_month" style="width: 5.8333333333333%">
<span class="variance"><sup> </sup></span>
</td>
<td class="total_row" rowspan="2">
$360.00 </td>
<td class="total_variance" rowspan="2">
</td>
</tr>
<tr>
<td class="recurring_period colspan bar0" colspan="12">
$30.00 monthly </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent) {
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "None"
}], "*")
}
</script>
</body>I cannot find a way to calculate the percentage of the first and last 2 columns correctly. I have tried:
Unfortunately I can also not move the position: relative to the top
If you have fixed table layout check "CSS Only Fixed Table Headers" on codepen
But if you have dynamic content or a lot of data in a table, you can use position: relative and change top property with js.
Here is a simple codepen to better understand how to do it. Of course, there are some pros and cons of this method.
Also, there are a lot of other js plugins to make table header fixed