How to deal with IE9 html table bug where extra column shows up for some rows with partial view?

Question

I see this question has already been asked around a IE9 but which is adding extra columns in random rows of a html table. The root issue seems to be a IE 9 bug that is fixed in IE 10 (but i have a lot of IE9 users)

It states it usually happens with tables built via ajax but i am seeing this on regular pages that output html tables.

There is a workaround Javascript solution but the answer assumes that you were building a table with Javascript (from an ajax call). I am using a partial view (or in some cases just rendering a regular formatted html table directly on a single page) so I wanted to find out if there is a solution to prevent this UI issue on IE9 when you are simply rendering direct html on page.

I want to avoid having to literally have no white space in my actually code as that will be very hard to maintain.

Answer 1

I faced this same problem and ended up on this page looking for a solution. In my case the problem was with HTML rendered by a Repeater control with ASP.Net 4.

I inspected the code generated by the server with Charles and there was no problem with the HTML.

The last sentence in the question lead me to my own simple solution.

I want to avoid having to literally have no white space in my actually code as that will be very hard to maintain.

I simply put comments between the opening of the TR tag and the first TD tag as well as between each TD and the closing TR tag:

<tr><!--
 --><td class="cell">
    Cell 1  
    </td><!--
 --><td class="cell">
    Cell 2  
    </td><!--
 --><td class="cell">
    Cell 3  
    </td><!--
 --><td class="cell">
    Cell 1  
    </td><!--
 --></tr>

This solution means we don't have to use an extension and it won't be hard to read or maintain the code in the future.