Internet Explorer 9 (IE9) Table White Space Issues

I was tasked with fixing a problem in our product where one of our data tables (HTML) was rendering on IE9 with spaces randomly scattered throughout the table this resulted in the data being in the wrong columns, or headers appearing in the wrong place. I originally thought I might there might be "holes", or null values in my data which was resulting in the error. I was wrong.

It is actually a bug in IE9.

The issue shows up, most often, when using AJAX when there is partial page rendering. It seems according to forum remarks to be focused on white space between table tag elements like line breaks, spaces, or carriage returns. So if you use HTML tidy, you will screw up your output. Nice one Microsoft!

Fortunately, there are "fixes" out there to help you get along. Here is the fix which I slightly modified from an answer on stackoverflow. A shout out goes to Blago for his recursive function listed below.

?

1 2 3 4 5 6 7 8 9 10 11 12

jQuery.fn.htmlClean = function() {     this.contents().filter(function() {         if (this.nodeType != 3) {             $(this).htmlClean();             return false;         }         else {             return !/\S/.test(this.nodeValue);         }     }).remove();     return this; }

You can implement it this way.

?

1	$('#myTable').htmlClean();

Here are some references on the issue if you are interested.

• [Bug]IE9 skips cells when rendering large table from Ajax using jquery
• IE9 table layout apparently affected by whitespace between HTML elements
• IE9 table has random rows which are offset at random columns
• Remove whitespace and line breaks between HTML elements using jQuery