Pure CSS Scrollable Table with Fixed Header

Using CSS to allow scrolling within a single HTML table


The Big 3 Version

Liquid Table with Basic CSS Browser Filtering

Header 1 Header 2 Header 3
Cell Content 1 Cell Content 2
More Cell Content 1 More Cell Content 2 Radio
Even More Cell Content 1 Even More Cell Content 2 Checkbox
And Repeat 1 And Repeat 2
Cell Content 1 Cell Content 2
More Cell Content 1 More Cell Content 2
Even More Cell Content 1 Even More Cell Content 2 No wrap this content table cell number 3
And Repeat 1 And Repeat 2 And Repeat 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
And Repeat 1 And Repeat 2 And Repeat 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
And Repeat 1 And Repeat 2 And Repeat 3
Cell Content 1 Cell Content 2 Cell Content 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam malesuada. Suspendisse sollicitudin turpis nec lectus. Ut lorem leo, sodales sed, vehicula nec, dapibus ac, odio. Donec tempor lectus at magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vel felis. Maecenas ut ligula non leo tempor porta. In hac habitasse platea dictumst. Sed faucibus tempus justo. Nunc suscipit lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam malesuada. Suspendisse sollicitudin turpis nec lectus. Ut lorem leo, sodales sed, vehicula nec, dapibus ac, odio. Donec tempor lectus at magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vel felis. Maecenas ut ligula non leo tempor porta. In hac habitasse platea dictumst. Sed faucibus tempus justo. Nunc suscipit lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam malesuada. Suspendisse sollicitudin turpis nec lectus. Ut lorem leo, sodales sed, vehicula nec, dapibus ac, odio. Donec tempor lectus at magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vel felis. Maecenas ut ligula non leo tempor porta. In hac habitasse platea dictumst. Sed faucibus tempus justo. Nunc suscipit lorem.
Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
And Repeat 1 And Repeat 2 And Repeat 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
And Repeat 1 And Repeat 2 And Repeat 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
And Repeat 1 And Repeat 2 And Repeat 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
And Repeat 1 And Repeat 2 And Repeat 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
And Repeat 1 And Repeat 2 And Repeat 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
And Repeat 1 And Repeat 2 And Repeat 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
End of Cell Content 1 End of Cell Content 2 End of Cell Content 3

See the The Big Four Version :: Fixed Table size with support for Opera

Also see the The Bullet Resistant Version :: Fixed Table size with wider range support and degrading of Browsers

Browser Support (table is scrollable with fixed headers)

Almost works (table is scrollable)

Doesn't work (table is not viewable)

Degrades gracefully

Notes:

Updates:













put a bunch of breaks to test scrolling within the HTML document itself.











put a bunch of breaks to test scrolling within the HTML document itself.











put a bunch of breaks to test scrolling within the HTML document itself.











done.