bug 225 - no support for TBody CSS height or overflow in IE in Quirks or Standards mode

Issue: #225
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.


Bug/Site Feedback |
Submit a bug

bug 210 - No .innerHTML support on Table, THead, TBody, TFoot, Tr's in IE

Issue: #210
Affects: IE6, IE7, IE8, IE9 RC 1
MSIE Feedback ID: 336254 |
MSIE Feedback ID: 332545
Status: Microsoft has confirmed this will NOT be fixed in IE8 RTM

Back Story: Explanation as to why innerHTML doesn't work - by the guy that wrote it!


Internet Explorer generally works best, when you pass it new content via the .innerHTML property. This is mainly due to many bugs in the DOM methods that would otherwise be preferred. However .innerHTML has its own problems, and IE has some strange issues using .innerHTML.

In IE, you can not use .innerHTML to set the contents of a table ,thead, tbody, tfoot element, or a tr element, because IE makes them readonly (Problem Report | MSDN Bug data).

Known Workarounds: Three.

Option 1:
Using the DOM methods instead {createElement, appendChild, etc.}, but remember that in IE, although you can code your HTML documents with a (table > tr > td) structure, you can't do that when building the DOM in JavaScript in IE!

In IE, you must create the structure in this format (table > tbody > tr > td) note the tbody is required. IE will not throw any error if you omit it, but it won't render the content either (bug 171).

Option 2:
As Anonymous pointed out, you can wrap the table in a '<div>' element, and set the .innerHTML on it (don't forget a '<tbody>' element to wrap the rows though.

Option 3:
In a similar fashion, you can set the .outerHTML of the table element instead (same catch for '<tbody>' applies). The advantage here, is that you don't mess up your DOM structure which might upset any CSS rules that were not expecting a div. The big catch here though, is to remember that .outerHTML is a proprietary feature of IE, thus if you use this technique, you'll need to ensure that you are only applying this to IE, not globally to all browsers.

Related Issues: (bug 124), (bug 171).