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.
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.