[html5] table with fixed headers

Markus Ernst derernst at gmx.ch
Thu Jul 3 00:38:11 PDT 2014


Am 01.07.2014 13:00 schrieb Larry Martell:
> I am trying to implement a table with fixed headers using the concepts
> from this page:
>
> http://www.imaputz.com/cssStuff/bigFourVersion.html#
>
> When I implemented the CSS from that page, my table columns are not
> aligned with the table headers.
>
> http://jsfiddle.net/softvar/yL84C/
>
> I was able to 'fix' this by explicitly setting the cell size:
>
> http://jsfiddle.net/cFr38/
>
> But that doesn't really work well for my app as I have 10 different
> tables the user can display, and they each have 25-35 columns, and I
> do not necessarily know in advance how wide the data will be.
> Currently, without the fixed headers, I do not specify the column
> width and they are automatically sized. Is there any way to get fixed
> headers without explicitly setting the width of the table cells?

I had the same task about 3 years ago. I found some jQuery based JS 
solutions that worked more or less (rather less), they may have been 
improved since then. If you want to go that way, a search for "jQuery 
scrollable table" will point you there.

Anyway, after scrollable table bodies have been requested for so many 
years, I am really surprised about the fact that simply setting tbody { 
overflow:auto } has no support yet.


More information about the Help mailing list