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>

Answer 3

The solution given @Shanison helps only partially but the problem persists if there are spaces between any of the other elements that can be part of the table content model like thead, th etc.

Here is a better regex devised by my Lead at work.

if (jQuery.browser.msie && jQuery.browser.version === '9.0')
{
    data = data.replace(/>\s+(?=<\/?(t|c)[hardfob])/gm,'>');
}

covering all table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th elements.

Note: jQuery.browser was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin. Please try to use feature detection instead.

Answer 4

I fixed this issue by removing the whitespace:

var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
var response_html_fixed = data.replace(expr, '><'); //A disgusting hack for ie9. Removes space between open and close <td> tags
$('#treegrid-data').replaceWith(response_html_fixed);

Answer 5

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 6

IE Blog mentions a new tool today called the Compat Inspector script to help troubleshoot IE 9 rendering incompatibility. It may help troubleshoot your issue.

http://blogs.msdn.com/b/ie/archive/2011/04/27/ie9-compat-inspector.aspx

Answer 7

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 :)

Answer 8

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 9

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 10

This is the very serious bug in IE9. In my case removing only white spaces between different td was not sufficient, So i have removed spaces between different tr also. And it is working fine.

Answer 11

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 12

Having same formatting issue with ie9, and a new issue in ie11 where it formats correctly but takes 25-40 seconds to render a table of about 400 rows and 9 columns. It has the same cause, whitespace inside the tr or td tags.

I'm displaying a table that is created by the rendering of a partial view from an AJAX call. I decided to BFH it on the server by removing the whitespace from the rendered partial view, using a method posted here: http://optimizeasp.net/remove-whitespace-from-html

This is his solution copied in-toto:

    private static readonly Regex RegexBetweenTags = new Regex(@">(?! )\s+",     RegexOptions.Compiled);
    private static readonly Regex RegexLineBreaks = new Regex(@"([\n\s])+?(?<= {2,})<", RegexOptions.Compiled);
    private static string RemoveWhitespaceFromHtml(string html)
    {

        html = RegexBetweenTags.Replace(html, ">");
        html = RegexLineBreaks.Replace(html, "<");
        return html.Trim();

    }

And here is a method that returns a partial view as a string, stolen from another SO answer:

public string RenderPartialViewToString(string viewName, object model)
    {
        this.ViewData.Model = model;
        try
        {
            using (StringWriter sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(this.ControllerContext, viewName);
                ViewContext viewContext = new ViewContext(this.ControllerContext, viewResult.View, this.ViewData, this.TempData, sw);
                viewResult.View.Render(viewContext, sw);
                return RemoveWhitespaceFromHtml(sw.ToString());
            }
        }
        catch (Exception ex)
        {
            //logger here
        }
    }

It takes a bit of time, but less than a second to render a table of about 400 rows, which for my purposes is good enough.

Answer 13

I had this problem sometimes on tables generated by Knockout. In my case I fixed it using the jQuery solution found here

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

Answer 14

I had the same issue with KendoUI grid in IE10. I was able to force IE to rerender missing table cells with this hack:

htmlTableElement.appendChild(document.createTextNode(''));

Appending an empty textNode makes IE to rerender the whole table.