Scrollable HTML Table With Fixed Header
In HTML when we have tables with many entries and lots of columns becomes complicated, and impractical to move the page up and down to see the column headers, and when there is something after the table, we need to scroll to the end of the table to be able to see what is below.
To solve these problems we can create a scrollable table with fixed header.
To create such a table we need to separate the table header and insert it into a new table, leaving two tables, and then wrap the table with the data within a DIV with fixed height and “overflow: auto” in CSS, to show the scrollbar in the DIV when height of the table is larger than the DIV. A disadvantage of this technique is that we can only have a dynamic length column, so for the rest we have to define a fixed size.
First you need to create or edit an CSS file with this code.
div.scrollTable (
background: # fff;
border: 1px solid # 888;
)
div.scrollTable table.header, div.scrollTable div.scroller table (
width: 100%;
border-collapse: collapse;
)
div.scrollTable table.header th, div.scrollTable div.scroller table td (
border: 1px solid # 444;
padding: 3px 5px;
)
div.scrollTable table.header th (
background: # ddd;
)
div.scrollTable div.scroller (
height: 200px;
overflow: auto;
)
div.scrollTable. column75px (
width: 75px;
)
div.scrollTable. column100px (
width: 100px;
)
div.scrollTable. column150px (
width: 150px;
)
Note that I defined different column sizes(column75px, column100px and column150px), but you can define other sizes.
Then, add this HTML to you page.
| Column 1 </ th> | Column 2 </ th> | Column 3 </ th> | </ th> </ tr> </ table>
|
|---|