It becomes glaringly obvious if you have borders within your table.

This approach has many issues such as ensures EXACT pixel widths because tables are so cute in that different browsers will allocate pixels differently based on calculations and you simply CANNOT (AFAIK) guarantee that the distribution will be perfect in all cases. float this one right over second tableĪn alternative approach some try is utilize the tbody and thead tags but that is flawed too because IE will not allow you put a scrollbar on the tbody which means you can't limit its height (so stupid IMO). For the most part, in order to gain the fixed header, you need to implement fixed height/width columns because most solutions involve using two separate tables, one for the header which will float and stay in place over the second table that contains the data. I was tasked by my company to research a solution for this that could function in IE7+, Firefox, and Chrome.Īfter many moons of searching, trying, and frustration it really boiled down to a fundamental problem. I wasn't 100% which you were referring to. There are a number of gotchyas with any approach you take, especially concerning cross browser/version support.Įven if it's not the header you want to fix, but the first row of data, the concept is still the same. especially if you want cross browser support.

You won't effectively pull this off without JavaScript. There are a number of documented approaches:

Freeze table header in tableedit