How to make html table scrollable with fixed headers?

Question

I have table with lots of rows. I want to make it vertically scrollable but with fixed headers.

Answer 1

You can use CSS to make the elements of the table scollable.

Say you have table like this:

<table>
  <tr>
    <th>heading 1</th>
    <th>heading 2</th>
  </tr>
  <tr class='scrollable'>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
</table>

Write CSS as below:

.scrollable{ 
    width: 150px;
    height: 150px;
    overflow: scroll;
}