IE9 adding empty table cells in large table

Well as usual, we are once again fighting the woes of the beloved Internet Explorer, and it appears that Microsoft’s latest greatest new and improved browser rival to the market IE9 still has a whole bunch of irritations and retardation to worry about (saw that one coming).

Today I was busy loading a massive amount of data into the body of a table using ajax and in Firefox and even Internet Explorer 8 it worked quite well, but Internet Explorer 9 decided that it would like to add some empty table cells randomly around my “massive table”, now of course I began by kicking something and cried a few times….. but then I thought about whitespacing and the usual problems I had found with it before while using “the best browser ever known to human-kind”(…not) and I thought of removing the whitespaces between the <tr>’s and <td>’s.

Sample code while crying and trying to get rid of the ironious cells:

<table>
<tbody>
<tr>
<td>Some text here 1</td>
<td>Some text here 2</td>
<td>Some text here 3</td>
<td>Some text here 4</td>
</tr>
</tbody>
</table>

The really dumb thing that fixed IE9’s problems:

<table>
<tbody>
<tr>
<td>Some text here 1</td>
<td>Some text here 2</td>
<td>Some text here 3</td>
<td>Some text here 4</td>
</tr>
</tbody>
</table>

And voila! Remove the whitespaces yourself and IE9 won’t get confused!

10 thoughts on “IE9 adding empty table cells in large table”

  1. you are anwsome! at the start I was thinking “If this solves the problem, I would post a stick of IE in the back of my toilet”, tomorrow I will buy the stick…

  2. Just wanted to say thanks! This saved me soooo much time…

    (just to mention as well that the problem does not show up in IE9 emulation mode i.e. from IE10/11 )

  3. That worked! I had the same problem with a long dynamic table that would randomely add cells here and there. I removed the white space only between table rows and my problems went away. Thanks for sharing solution.

  4. maybe the’ve backported some code from IE6 and got this error back 😉 but thanks for freshing up my grey braincells as this solved my IE9 “ghost-cell-problem” too !

    1. @petschki, Microsoft has the tendancy of back porting for some silly reason. You’d think they’d have gotten over the IE6 (/spit) code by now? Guess again..

  5. It seems that if you have more than one space in a row between elements in a table, IE9 runs into problems and seems to insert a ghost cell. I have been able to get rid of the problem by just reducing any instances of 2 or more spaces between elements to one. I am still able to indent and everything else that makes it easier to follow the html.

    1. Thanks for the addition Malcolm, I believe that is exactly the problem yes. In my example above I am just making 100% sure that the problem doesn’t occur rather than trial cases.

  6. I am having the same problem on IE9, and I am creating a table from javascript and assigning to the innerHTML. How can I fix it through javascript?

    Thanks

    1. Hi Ted, make sure there are no whitespaces in the text, parse your text you send to the innerHTML via a javascript replace() function to remove all whitespace characters between tags.

Leave a Reply

Your email address will not be published.