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

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 2

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 3

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 4

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 5

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.

Answer 6

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>