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

Realize

any code? maybe you have a mismatched tag somewhere? – Timothytimour

Are you able to validate the HTML using the IE9 F12 tools? Does IE9 tell you what mode it is rendering in? Quirks Mode, IE 7, IE 8, IE 9 Standards (default), etc... – Onassis

IE Blog mentions a new tool today to help troubleshoot IE 9 incompatibility: blogs.msdn.com/b/ie/archive/2011/04/27/… – Onassis

The code is really long, I dont think the problem is there. No error found with the F12 tool, and the rendering mode is IE9. I try the Compat inspector and let you know ;) I checked also for tag mistmaches (first thing I did) but no luck – Realize

BTW, i found the problem: it seems that some javascript code before the HEAD tag was causing the problem. IE9 does not seem to handle it well,...it's a problem since i slved an MVC problem doing that so..I'm back to the old one :) Thank you all. – Realize

FYI: there is a fiddle that reproduces this issue on ie9: jsfiddle.net/kiranmn/kYRnV/4/embedded/result – Papandreou

duplicates ie9-table-has-random-rows-which-are-offset-at-random-columns – Mitzimitzie

This issue is similar https://mcmap.net/q/195626/-ie9-strange-table-issue – Anthologize

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

Pettaway

This solution fixed my problem. It gave me quiet a puzzle before I found this solution. – Weatherwise

The link is no longer available. – Boarding

It is still available. YOu must login to view the contents. I just took a screenshots. You can find the screenshot in my answer – Pettaway

I also added   to the empty cells. – Jongjongleur

what if you are not returning from ajax but rather through a partial view – Meliamelic

@Meliamelic If it is not ajax, you can replace the whole table html again after the document is ready. – Pettaway

@shanison . i got problem when appending table rows inside getjson. some time two rows combined . i tried to use your replace code but didn't fix the problem in firefox! Could you help me fix it ?var newRowContent = '<tr><td>'+count+')'+this.gsx$name.$t+'</td><td>'+this.gsx$category.$t+'</td></tr>\n'; $("#tblEntAttributes tbody").append(newRowContent); – Impotent

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>

Tabulate

Thank you, I'll try it if the problem occours again. Glad to know I'm not the only one having it though ;) – Realize

what? (this was my first reaction). But it worked! Thank you so much! – Cha

You sir, you are awesome! :-) – Euripides

Thank you so much for this! Removing all the spaces between the <td> start and end tags did in fact work. – Tiling

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.

Mitzimitzie

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

Telespectroscope

Answer 5

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

Onassis

Couldn't find anything with the tool. Just a lot of validating problem all due to the aspnet engine rendering (missing end / for some meta and link tag in the header). – Realize

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

Gasolier

Answer 7

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>

Kaolinite

I like this solution. It is more straight-forward than stripping white-space from between all elements. Moreover, it worked for me :-) – Chinkapin

Answer 8

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)

Ortolan

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!

Dancy

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.

Taiwan

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.

Wallin

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.

Anguish

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;
}

Dalpe

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.

Cowherd