HTML CSS

FREEZE ROW & COLUMN OF HTML TABLE

(quick & simple examples)

<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>

LIMIT HEIGHT & SET OVERFLOW

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>

STICKY HEADER

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>

FREEZE COLUMN

03

#demoC th   { position: sticky; left: 0; z-index: 2; }