Question

I’m trying to achieve a basic fixed table header effect. For this I’m using two tables with the exact same markup and CSS. The “content” table is in a div with overflow-y set. Everything looks fine except IE7 and Opera where the “header” table has different column widths than the “content” table.

Here is a jsfiddle: http://jsfiddle.net/gEtGW/1/

Please let me know if you have an idea about this.

Thanks!

EDIT:

Answer 1

I had this exact same problem and I first tried to solve it in the same way you are doing it. But that led nowhere — just because of the kinds of cross-browser issues you’re seeing. I spent days and days trying to make it right. I finally gave up on the two-table approach. Instead, I made a div with the table header material, calculating the width of each header element from the first row of the content table. It has worked flawlessly in all browsers. I posed a question like yours over here on SO. You might want to give it a look.

Here is the table using the new scheme.

HTH