HTML table not rendering correctly in IE9

Question

Really weird one, this.

I'm using an asp:Repeater to create an HTML table, like so:

Markup:

<asp:Repeater ID="myRpt" runat="server">
    <HeaderTemplate>
        <table id="myGrd" border="0" style="cursor:pointer;width:100%;  background-color:white;" cellpadding="2" cellspacing="0">
            <tbody>
    </HeaderTemplate>
    <ItemTemplate>
        <tr onclick="criteria.rowClicked(this);">
            <td style="border:solid 1px black;">
                <asp:Literal ID="lblName" runat="server"></asp:Literal>
            </td>
            <td style="border:solid 1px black;width:200px;">
                <asp:Literal ID="lblRange" runat="server"></asp:Literal>
            </td>

            <td style="display:none;" >
                <asp:Literal ID="lblMisc" runat="server"></asp:Literal>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </tbody> </table>
    </FooterTemplate>
</asp:Repeater>

VB:

    Public Sub populateGrid(ByVal ds As DataSet)
        'ds is just made from a simple select query
        myRpt.DataSource = ds
        myRpt.DataBind()
    End Sub

 Private Sub myRpt_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles myRpt.ItemDataBound
        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
            Dim lblName As Literal = e.Item.FindControl("lblName")
            Dim lblRange As Literal = e.Item.FindControl("lblRange")
            Dim lblMisc As Literal = e.Item.FindControl("lblMisc")

            lblName.Text = "<font style='font-size:10pt; font-family:arial;'>" & Trim(e.Item.DataItem("Name")) & "</font>"
            lblRange.Text = "<font style='font-size:10pt; font-family:arial;'>" & Trim(e.Item.DataItem("Range")) & "</font>"
            lblMisc.Text = "<font style='font-size:10pt; font-family:arial;'>" & Trim(e.Item.DataItem("Miscellaneous")) & "</font>"
        End If
    End Sub

This displays fine in Firefox and Chrome, and most of the time in IE. However sometimes for larger tables (50+ rows) IE behaves strangely. It appears to add a blank cell...

...but there's nothing in the HTML- I've checked using the developer tools. The incorrect row has identical markup to the correct rows, except for the cell text. Whatsmore, if I delete the incorrect row, the one above it starts displaying wrong instead.

Please can someone suggest why on earth IE is rendering it like this, and what I can do to stop it.

Answer 1

This seems to be a known bug with IE9 on rendering large tables. The problem was resolved when removing white space between table def opening and closing tags eg. </td><td>

MSDN discussion on IE 9 rendering

Answer 2

This is a known IE9 issue, you can fix this by putting the following code somewhere in your HTML page:

$(function() {
    var browser = $.browser;
    if ( browser.msie && browser.version.slice(0,3) == "9.0" ) {
        $('table').each(function(index) {
                var replace = $(this).html().replace(/td>\s+<td/g,'td><td'); 
                $(this).html(replace);
        });
    }
});

Answer 3

I had a huge table that expanded when a Click event occurred. Happened only in IE9, all was fine in IE8, IE10, Chrome etc.

The above solution failed for me, as well as others answers of the same kind.

I solved it this way:

I added borders to the table and it was clear that the HTML was not correct. Either some colspan was missing or the cells needed   or could have been anything.

I also noticed that now, with the tables border=1 attribute, the problem with the Click-expanding was gone.

So I put a class xltable to the table and put .xltable td {border:0px solid white;} in my css.

My code is still not "valid" but it works.