Affects: IE6, IE7, IE8
The beauty of CSS is that you can take a simple design and enhance it with a style sheet for aesthetics and usability.
A classic enhancement is to wrap table rows in a tbody element that will allow for vertical scrolling when they exceed a certain height.
All you need to do is set 2 or 3 CSS properties.
Example:
<style type="text/css">
tbody{
height:100px;
overflow-x:hidden;
overflow-y:auto;
}
</style>
This works great and thus makes the table headers always visible even when the user has scrolled to the bottom of the table.
However in IE there is a catch. If you don't have a DOCTYPE set and thus are rendering in Quirks Mode - IE decides that your tbody height isn't for the entire table contents but instead should be applied to every single row in your table! In fact IE6 & IE7 do the same thing in Standards Mode too. Only IE8 running in IE8 Standards Mode doesn't alter the TR row height.
Sample screenshot from Firefox:
Sample screenshot from IE8 in Quirks Mode (same result for IE6 and IE7 in Standards Mode):
Sample screenshot from IE8 in Standards Mode:
I'm not entirely sure how or why this implementation would have ever made it past an initial code check-in as it is obviously wrong, serves no useful purpose, and I fail to see how this could possibly be helpful to any developer or end user.
Of course this is really just one stumbling block on the way to another. Even if you do render in Standards Mode - IE still won't render the vertical scrollbar on your tbody nor restrict the height and thus you still can't improve the user experience for IE users.
If you do have a simple technique to make scrollable tables work in IE - please submit feedback indicating how. Outside of very complex hacks I haven't seen any that work in IE.
Known Workarounds: None. IE does not support CSS height, overflow, overflow-x, or overflow-y on a TBody element.
Related Issues: None.
Submit a bug
Posts
