How to freeze first row of html table using tr td

Posted on by Techdezine

Freeze the first row of the table by using a sticky tag, Follow the below code for how to understand and use.

Add “position : sticky” css property to  <thead> of <hml>

Example shown below

CSS

 .tableFixHead          { overflow-y: auto; height: 400px; }
.tableFixHead thead th { position: sticky; top: 0; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }
/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
  box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
  box-shadow: inset 1px 1px #000, 0 1px #000;
}

HTML

<div class="tableFixHead">
  <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
  <tr>
    <th><a href="#">Header 1</a></th>
    <th><a href="#">Header 2</a></th>
    <th><a href="#">Header 3</a></th>
  </tr>
</thead>
<tbody class="scrollContent">
  <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
  </tr>
  <tr>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
  </tr>
  <tr>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
  </tr>
  <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
  </tr>
  <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
  </tr>
  <tr>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
  </tr>
  <tr>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
  </tr>
  <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
  </tr>
  <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
  </tr>
  <tr>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
  </tr>
  <tr>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
  </tr>
  <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
  </tr>
  <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
  </tr>
  <tr>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
  </tr>
  <tr>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
  </tr>
  <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
  </tr>
  <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
  </tr>
  <tr>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
  </tr>
  <tr>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
  </tr>
  <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
  </tr>
  <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
  </tr>
  <tr>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
  </tr>
  <tr>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
  </tr>
  <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
  </tr>
  <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
  </tr>
</table>
</div>