Make TBODY scrollable in Webkit browsers

Solution 1:

Here is a working example:

http://www.imaputz.com/cssStuff/bigFourVersion.html

You have to add the display:block to the thead > tr and tbody

Solution 2:

Using the display:block style only works if you have 1 column. If you have multiple data columns - with multiple fields - then display:block appears to make all data columns scrollable but under the 1st column (does the same in Firefox - which is the only browser I know that does tbody scrolling nicely). Incidentally, on Firefox - you can use the overflow-x: hidden style to suppress the horizontal scroll.

I realized that the issue I mention only occurs if you are not specifying a width for the th & td elements - if you can fix the column widths then it works. Problem for me is I can't fix the column widths.