HTML CSS
<table id="demoA"> <thead><tr> <th>Head</th><th>Head</th> </tr></thead> <tbody> <tr><td>Cell</td><td>Cell</td></tr> <tr><td>Cell</td><td>Cell</td></tr> </tbody> </table>
01
#demoA thead, #demoA tbody { display: block; } #demoA tbody { max-height: 100px; overflow: auto; }
<table id="demoB"> <thead><tr> <th>Head</th><th>Head</th> </tr></thead> <tbody> <tr><td>Cell</td><td>Cell</td></tr> <tr><td>Cell</td><td>Cell</td></tr> </tbody> </table>
02
#demoB th { position: sticky; top: 0; z-index: 2; }
<table id="demoC"> <tr> <th>Head</th> <td>Cell</td><td>Cell</td> </tr> <tr> <th>Head</th> <td>Cell</td><td>Cell</td> </tr></table>
03
#demoC th { position: sticky; left: 0; z-index: 2; }