Table with Fixed Header
|
||||||||||||||||||||
|
Result
This is working in all browser
Demo jsfiddle http://jsfiddle.net/nyCKE/6302/
Late answer, another idea, but very short.
put the contents of header cells into div
fix the header contents, see CSS
table { margin-top: 20px; display: inline-block; overflow: auto; }
th div { margin-top: -20px; position: absolute; }
Note that it is possible to display table as inline-block due to anonymous table objects:
“missing” [in HTML table tree structure] elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself.
/* scrolltable rules */
table { margin-top: 20px; display: inline-block; overflow: auto; }
th div { margin-top: -20px; position: absolute; }
/* design */
table { border-collapse: collapse; }
tr:nth-child(even) { background: #EEE; }
|
first
|
second
|
|---|---|
| foo | bar |
| foo foo foo foo foo | bar |
| foo | bar |
| foo | bar bar bar |
| foo | bar |
| foo | bar |
| foo | bar |
| foo | bar |
| foo | bar |
| foo | bar |
| foo | bar |
| foo | bar |
| foo | bar |
| foo | bar |
As of 2016
The proper way to achieve this is position: sticky – see the demo in the link.