Internet Explorer 9 no representa correctamente las celdas de la tabla

Mi sitio web siempre ha funcionado sin problemas con IE8, IE7, FF, Chrome y Safari. Ahora lo estoy probando en IE9 y estoy experimentando un problema extraño: en algunas páginas, algunos datos tabulares se muestran incorrectamente.

La fuente HTML es correcta y todo, y la fila que da el problema cambia cada vez que actualizo la página (a decir verdad, el problema en sí aparece solo en algunas actualizaciones, no en todas).

Usando la herramienta F12 de IE, la estructura de la tabla parece correcta, no debería haber ningún TD vacío después del TD que contiene M08000007448, pero aún así se renderiza así.

Además, si uso la herramienta F12, con la herramienta "seleccionar elemento haciendo clic" en la barra de herramientas, y trato de hacer clic en el espacio vacío entre M08000007448 y 19, selecciona el TR, no un "td oculto".

Tengo este problema de representación de tablas también en alguna otra tabla de la aplicación, ¿alguien está experimentando algo como esto? Sucede solo en IE9 :(

No sé si es importante, pero la página está hecha con ASPNET (formularios web) y usa Jquery y algún otro complemento JS.

Traté de guardar la página (con imágenes) y abrirla en local con IE9, pero el problema nunca ocurre. (Por supuesto, verifiqué toda la estructura de la tabla y está bien. El encabezado y todas las filas tienen el mismo número de TD, con el número correcto de colspan cuando sea necesario).

También tengo exactamente el mismo problema. es posible que desee leer este https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables

Puede eliminar el espacio entre td usando javascript si su html se devuelve desde ajax, luego, desde la respuesta, lo reemplaza con

response_html = response_html.replace(/td>\s+<td/g,'td><td');
$('#table').html(response_html);

Tuve exactamente el mismo problema al poblar una tabla usando plantillas jquery. Seguí teniendo 'fantasmas' <td>en conjuntos de datos más grandes (300+) solo en IE9. Estos <td>empujarían las columnas externas fuera de los límites de mi tabla.

Arreglé esto haciendo algo realmente tonto; eliminando todos los espacios entre el<td> etiquetas de inicio y final y justificando a la izquierda el marcado HTML correspondiente a mi tabla. Básicamente, desea que todos estén <td> </td>en la misma línea, sin espacios.

Ejemplo:

<table>
<tr class="grid_customer_normal">
<td>${primary}</td>
<td>${secondary}</td>
<td>${phone}</td>
<td>${address}</td>
</tr>
</table>

La solución dada a @Shanison ayuda solo parcialmente, pero el problema persiste si hay espacios entre cualquiera de los otros elementos que pueden ser parte del modelo de contenido de la tabla como thead, th, etc.

Aquí hay una expresión regular mejor diseñada por mi líder en el trabajo.

if (jQuery.browser.msie && jQuery.browser.version === '9.0')
{
    data = data.replace(/>\s+(?=<\/?(t|c)[hardfob])/gm,'>');
}

cubriendo todos los elementos table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th.

Nota: jQuery.browser se eliminó en jQuery 1.9 y solo está disponible a través del complemento jQuery.migrate. En su lugar, intente utilizar la detección de funciones.

Solucioné este problema eliminando el espacio en blanco:

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

IE Blog menciona una nueva herramienta hoy llamada el script Compat Inspector para ayudar a solucionar problemas de incompatibilidad de renderizado de IE 9. Puede ayudar a solucionar su problema.

http://blogs.msdn.com/b/ie/archive/2011/04/27/ie9-compat-inspector.aspx

Yo también estaba teniendo ese problema.

Se me ocurrió, ese atributo de ancho en las etiquetas td / th causando este problema.

Lo cambié a style = "width: XXpx" y el problema está resuelto :)

También encontré este problema y me di cuenta de que sucedía cuando estaba colocando texto directamente en <td>elementos. No estoy seguro de si es un estándar o no, pero después de envolver cualquier texto en <span>elementos, los problemas de representación desaparecieron.

Entonces en lugar de:

<td>gibberish</td>

tratar:

<td><span>gibberish</span></td>

Encontré un script muy útil para evitar celdas no deseadas en su tabla html mientras se renderiza.

function removeWhiteSpaces()
{
   $('#myTable').html(function(i, el) {
      return el.replace(/>\s*</g, '><');
   });
}

Esta función de javascript debe llamar cuando se carga la página (es decir, evento de carga)

Respuesta tardía, pero espero poder ayudar a alguien con esto. Experimenté el mismo problema al depurar en IE9. La solución fue eliminar todos los espacios en blanco en el código HTML. En vez de

<tr> <td>...</td> <td>...</td> </tr>

Tenía que hacer

<tr><td>...</td><td>...</td></tr>

¡Esto pareció resolver el problema!

Este es un error muy grave en IE9. En mi caso, eliminar solo los espacios en blanco entre diferentes td no fue suficiente, por lo que también eliminé espacios entre diferentes tr. Y está funcionando bien.

Tuve un problema similar con ie-9 al renderizar una tabla dinámica.

var table = $('<table><tr><td style="width :100"></td></tr></table>');

cuando se renderiza se traduce en ...

<table><tbody><tr><td style="width :100px"></td></tr></tbody></table>

esto funciona perfectamente bien en 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>

necesitas escribir en 100pxlugar de 100.

Tiene el mismo problema de formato con ie9, y un nuevo problema en ie11 donde se formatea correctamente pero tarda entre 25 y 40 segundos en representar una tabla de aproximadamente 400 filas y 9 columnas. Tiene la misma causa, espacios en blanco dentro de las etiquetas tr o td.

Estoy mostrando una tabla que se crea mediante la representación de una vista parcial de una llamada AJAX. Decidí BFH en el servidor eliminando el espacio en blanco de la vista parcial renderizada, usando un método publicado aquí: http://optimizeasp.net/remove-whitespace-from-html

Esta es su solución copiada 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();

    }

Y aquí hay un método que devuelve una vista parcial como una cadena, robada de otra respuesta SO:

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

Se necesita un poco de tiempo, pero menos de un segundo, para renderizar una tabla de aproximadamente 400 filas, lo que para mis propósitos es suficientemente bueno.

A veces tuve este problema en tablas generadas por Knockout. En mi caso, lo arreglé usando la solución jQuery que se encuentra aquí

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

Tuve el mismo problema con la cuadrícula KendoUI en IE10. Pude obligar a IE a volver a procesar las celdas de la tabla que faltaban con este truco:

htmlTableElement.appendChild(document.createTextNode(''));

Agregar un textNode vacío hace que IE vuelva a renderizar toda la tabla.