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 renders incorrectly.

The HTML source is correct and all, and the row giving the problem changes every time I refresh the page (to tell the truth, the problem itself appears only in some refresh, not all).

Using the F12 Tool of IE, the table structure appears correct, there should be no empty TD after the TD containing M08000007448, but still it renders like this.

Moreover, if I use the F12 tool, with "select element by click" tool in the toolbar, and I try to click on the empty space between M08000007448 and 19 , it selects the TR, not a "hidden td".

I'm having this table rendering problem also in some other table in the application, anyone experiencing something like this? It happens only in IE9 :(

I don't know if it's important, but the page is made with ASPNET (webforms) and use Jquery and some other JS plugin.

I tried to save the page (with images) and open it in local with IE9, but the problem never occurs. (Of course I checked all the table structure and it's ok. Header and all rows have the eact same number of TD's, with the right number of colspan when necessary).

Answer 1

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 2

I had the same exact issue populating a table using jquery templates. I kept having 'ghost' <td>'s on larger datasets (300+) only in IE9. These <td>'s would push the outer columns outside the boundries of my table.

I fixed this by doing something really silly; removing all the spaces betwen the <td> start and end tags and left justifying the HTML markup pertaining to my table. Basically, you want all of your <td> </td> on the same line, no spaces.

Example:

<table> <tr class="grid_customer_normal"> <td>${primary}</td> <td>${secondary}</td> <td>${phone}</td> <td>${address}</td> </tr> </table>