HTML table does not display IE9 correctly

Question

Really strange, this.

I use asp:Repeater to create an HTML table, for example:

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 well in Firefox and Chrome, and most of the time in IE. However, sometimes for large tables (more than 50 rows) IE behaves strangely. It seems like an empty cell has been added ...

... but I didn’t check anything in HTML using the developer tools. An invalid row has the same markup for the correct rows, with the exception of the cell text. Moreover, if I delete the wrong line, then above it will start to display incorrectly instead.

Please can anyone suggest why IE actually does it this way and what I can do to stop it.

Answer 1

This seems to be a known bug with IE9 when rendering large tables. The problem was fixed when removing the gap between the opening and closing table tags, for example. </td><td>

MSDN discussion on rendering IE 9

Answer 2

This is a known IE9 problem, you can fix this by putting the following code on 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 the Click event occurred. Only happened in IE9, everything was in IE8, IE10, Chrome, etc.

The above solution was unsuccessful for me, as well as for other answers of the same type.

I solved it like this:

I added table borders, and it was clear that the HTML was incorrect. Either some colspan was missing, or the cells needed   or could be anything.

I also noticed that now with the border=1 attribute border=1 table, the problem with the Click extension has disappeared.

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

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