Fixed table header
HTML
<p>E<p>t<p>c<p>.<p>.<p>.
<div>
<table id="idtable">
<thead id="idthead">
<tr>
<th>Foo</th><th>Bar</th>
</tr>
</thead>
<tbody>
<tr><td>A 000</td><td>B 000</td></tr>
<tr><td>A 001</td><td>B 001</td></tr>
<tr><td>A 002</td><td>B 002</td></tr>
<tr><td>A 003</td><td>B 003</td></tr>
<tr><td>A 004</td><td>B 004</td></tr>
<tr><td>A 005</td><td>B 005</td></tr>
<tr><td>A 006</td><td>B 006</td></tr>
<tr><td>A 007</td><td>B 007</td></tr>
<tr><td>A 008</td><td>B 008</td></tr>
<tr><td>A 009</td><td>B 009</td></tr>
<tr><td>A 010</td><td>B 000</td></tr>
<tr><td>A 011</td><td>B 001</td></tr>
<tr><td>A 012</td><td>B 002</td></tr>
<tr><td>A 013</td><td>B 003</td></tr>
<tr><td>A 014</td><td>B 004</td></tr>
<tr><td>A 015</td><td>B 005</td></tr>
<tr><td>A 016</td><td>B 006</td></tr>
<tr><td>A 017</td><td>B 007</td></tr>
<tr><td>A 018</td><td>B 008</td></tr>
<tr><td>A 019</td><td>B 009</td></tr>
<tr><td>A 020</td><td>B 000</td></tr>
<tr><td>A 021</td><td>B 001</td></tr>
<tr><td>A 022</td><td>B 002</td></tr>
<tr><td>A 023</td><td>B 003</td></tr>
<tr><td>A 024</td><td>B 004</td></tr>
<tr><td>A 025</td><td>B 005</td></tr>
<tr><td>A 026</td><td>B 006</td></tr>
<tr><td>A 027</td><td>B 007</td></tr>
<tr><td>A 028</td><td>B 008</td></tr>
<tr><td>A 029</td><td>B 009</td></tr>
<tr><td>A 030</td><td>B 000</td></tr>
<tr><td>A 031</td><td>B 001</td></tr>
<tr><td>A 032</td><td>B 002</td></tr>
<tr><td>A 033</td><td>B 003</td></tr>
<tr><td>A 034</td><td>B 004</td></tr>
<tr><td>A 035</td><td>B 005</td></tr>
<tr><td>A 036</td><td>B 006</td></tr>
<tr><td>A 037</td><td>B 007</td></tr>
<tr><td>A 038</td><td>B 008</td></tr>
<tr><td>A 039</td><td>B 009</td></tr>
<tr><td>A 040</td><td>B 000</td></tr>
<tr><td>A 041</td><td>B 001</td></tr>
<tr><td>A 042</td><td>B 002</td></tr>
<tr><td>A 043</td><td>B...
CSS
th,td { border: 1px solid black; background-color: lightgray}
p { height: 100px; }
/* Note border collapse not working with transform (header borders disappearing).
* "border-spacing: 0px;" could be used as an ugly workaround or by setting the width
* of each border manually.
*/
/* table { border-collapse: collapse; } */
JavaScript
document.addEventListener("scroll", function() {
var bt = document.getElementById("idtable").getBoundingClientRect();
var eh = document.getElementById("idthead");
if (-bt.height < bt.y && bt.y < 0)
eh.style.transform = "translate(0,"+(-bt.y)+"px)";
else
eh.style.transform = "none";
}
);