IE9 + css: fixed header table issue

Question

So, I think this is a problem with CSS more than anything else, but basically, the HTML I provided contains a fixed header table in a reactive layout.
Code: http://jsfiddle.net/JpRQh/10/

There are 3 rows of data, but in IE9 it seems like the rows of the table are crazy and the scroll bar is disabled.

An example that I followed on fixed header tables: http://www.imaputz.com/cssStuff/bigFourVersion.html has the same problem in IE9.

Any ideas on how to fix it?

EDIT: I promise to scroll through the tables if there is enough data. But I included only 3 lines.

Answer 1

This is the rule that causes problems in IE. Real-time example: http://jsfiddle.net/JpRQh/12/

html>body tbody.scrollContent { margin-top: 24px; padding-top: 8px; display: block; height: 400px; /* If you delete this rule you will see the table rows return to their normal size */ overflow: auto; width: 100% } 

Styling tbody scrolling and fixed headers, etc., as a rule, causes a lot of problems with cross-browser compatibility. You can see the tbody browser scroll tbody .

This, however, seems to be the best cross browser solution. You will need to check the CSS.