IE9 Phantom Table Cell Generation

So your'e here because you have a HTML table that works on every browser except IE9, for some reason on IE9 displays a phantom cell that doesn't exist in the HTML anywhere (even when you use it's inspector tool) and you have no idea what to do....

This problem has plagued me for awhile now and pops up every now and again, I thought i'd share a quick guide on why it happens and how to fix it

Pretty much what happens is your codebase will looks a bit like this:

<table>
  <tr>
    <td>Cell one</td>
    <td>Cell two</td>
    <td>Cell three</td>
  </tr>
</table>

Every (normal) browser parses that code with this kind of logic

"ok so a table with one row and three cells, lets display that.."

But not IE9, IE9 reads through tables and second guesses itself, it parses it and thinks

"ok so a table with one row and three cells, but there's some spaces? did they mean four cells? hmm well lets display four"

and therefore screws up your columns..

The only way to fix to fix this is to have the code formatted in this way:

<table><tr><td>Cell one</td><td>Cell two</td><td>Cell three</td></tr></table>

So IE9 wont see any spaces and think we need more cells than whats actually written.

The problem with the solution though is once you remove all the spaces, the code becomes really hard to read, so what I suggest is that you leave this until the end of your project so its easier work on in the meantime.

Or, if you like, you can use a regexp to remove whitespace like this:

var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
tableHtml = tableHtml.replace(expr, '><');

But with very large tables i'd suggest that'll be a nightmare on browser memory and the other fix is easier...

Supported Documentation

https://connect.microsoft.com/IE/feedback/details/665694/ie9-skips-cells-when-rendering-large-table-with-multiple-tbody-elements-from-ajax-using-jquery

https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables

http://social.msdn.microsoft.com/Forums/ie/en-US/e6f49d52-ec3f-47c5-802e-b80d1a58ed39/bugie9-skips-cells-when-rendering-large-table-from-ajax-using-jquery

And Discussions

http://stackoverflow.com/questions/7267014/ie9-table-has-random-rows-which-are-offset-at-random-columns

http://stackoverflow.com/questions/5805956/internet-explorer-9-not-rendering-table-cells-properly?answertab=votes#tab-top

TL;DR - IE9 Bug that reads whitespace in tables as "cells" and generates phantom cells that screw everything up