How to freeze header row in HTML table?

Question

I am using an HTML table and have applied vertical scroll to it and now I want to freeze the header row during scrolling. How can I do this?

Answer 1

HTML:

<table>
 <tr id="header-row">
  <th>header col 1</th>
  <th>header col 2</th>
 </tr>
 <tr>
  <td>data</td>
  <td>data</td>
 <tr>
 <tr>...</tr>
 ...
</table>

CSS:

#header-row { position:fixed; top:0; left:0; }
table {padding-top:15px; }