Internet Explorer 9 not rendering table cells properly

Question

My website has always run smoothly with IE8, IE7, FF, Chrome and Safari. Now I\'m testing it on IE9 and I\'m experiencing a strange problem: in some pages, some tabular data

Answer 1

I ran into this problem as well and I realized that it happened when I was directly putting text in <td> elements. I'm not certain whether it's a standard or not but after wrapping any text in <span> elements, the rendering issues disappeared.

So instead of:

<td>gibberish</td>

try:

<td><span>gibberish</span></td>

Answer 2

I have exactly the same problem as well. you may want to read this https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables

YOu can remove the space inbetween td by using javascript if your html is returned from ajax, then from the response, you replace it with

response_html = response_html.replace(/td>\s+<td/g,'td><td');
$('#table').html(response_html);

Answer 3

Late answer, but hopefully I can help someone with this. I experienced the same problem when debugging in IE9. The solution was removing all whitespaces in the HTML code. Instead of

<tr> <td>...</td> <td>...</td> </tr>

I had to do

<tr><td>...</td><td>...</td></tr>

This seemed to solve the problem!

Answer 4

Found a very useful script to prevent unwanted cells in your html table while rendering.

function removeWhiteSpaces()
{
   $('#myTable').html(function(i, el) {
      return el.replace(/>\s*</g, '><');
   });
}

This javascript function you should call when the page loads (i.e. onload event)

Answer 5

I had similar problem with ie-9 when rendering dynamic table.

var table = $('<table><tr><td style="width :100"></td></tr></table>');

when rendered translates to...

<table><tbody><tr><td style="width :100px"></td></tr></tbody></table>

this works perfectly fine in ie=10 chrome safari...

 //   but for ie-8 it renders to... with a style attr in my case

 <table><tbody><tr><td ></td></tr></tbody></table>

you need to write 100px instead of 100.

Answer 6

I was having that problem too.

It occured to me, that width attribute in td/th tags causng this problem.

Changed it to style="width: XXpx" and problem is solved :)