Scrollable html table with fixed headers for displaying large table

Demo here

          We can easily make a table element scrollable by specifying overflow property to scroll and giving a fixed height. On scrolling down, the table headers scroll up and become invisible, by default. If the table is too large, and is being scrolled down, it is preferable to have the headers not scroll.

     

         To achieve this effect, we create two tables, one for displaying the header that would remain fixed and another for displaying the scrollable content. Overflow property now would be mentioned on the scrollable content.

Notes:

• table's border-collapse css property is set to collapse so the cell borders would be merged and only a single border will be shown
• column width of the two tables should match to give a single table feel.