IE9 + css : problem with fixed header table

Question

So, I think this is a CSS issue more than anything, but basically, the HTML I've 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 table rows are crazy high, and the scroll bar hase been disabled.

The 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 the table scrolls if there is enough data. But i only included 3 rows for example.

Answer 1

This is the rule that causes the trouble in IE. Live 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 a scrolling tbody and fixed headers etc. tends to cause a lot of issues with cross-browser compatibility. You might look at this link about cross-browser scrolling tbody .

This however seems to be the best looking cross-browser solution. You will need to inspect the CSS.