O Internet Explorer 9 não renderiza as células da tabela corretamente

Meu site sempre funcionou perfeitamente com IE8, IE7, FF, Chrome e Safari. Agora estou testando no IE9 e estou tendo um problema estranho: em algumas páginas, alguns dados tabulares são renderizados incorretamente.

O código-fonte HTML está correto e tudo, e a linha que dá o problema muda toda vez que eu atualizo a página (para falar a verdade, o problema em si só aparece em alguma atualização, não em tudo).

Usando a ferramenta F12 do IE, a estrutura da tabela parece correta, não deve haver nenhum TD vazio após o TD contendo M08000007448, mas ainda assim é processado.

Além disso, se eu usar a ferramenta F12, com a ferramenta "selecionar elemento por clique" na barra de ferramentas, e tento clicar no espaço vazio entre M08000007448 e 19, ela seleciona o TR, não um "td oculto".

Estou tendo esse problema de renderização de tabela também em alguma outra tabela do aplicativo, alguém está passando por algo assim? Acontece apenas no IE9 :(

Não sei se é importante, mas a página é feita com ASPNET (webforms) e usa Jquery e algum outro plugin JS.

Tentei salvar a página (com imagens) e abri-la no local com o IE9, mas o problema nunca ocorre. (Claro que verifiquei toda a estrutura da tabela e está tudo bem. Cabeçalho e todas as linhas têm cada vez o mesmo número de TD's, com o número certo de colspan quando necessário).

Eu também tenho exatamente o mesmo problema. você pode querer ler isto https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables

Você pode remover o espaço entre td usando javascript se seu html for retornado de ajax, a partir da resposta, você o substitui por

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

Eu tive exatamente o mesmo problema ao preencher uma tabela usando modelos jquery. Continuei tendo 'fantasmas' <td>em conjuntos de dados maiores (mais de 300) apenas no IE9. Isso <td>empurraria as colunas externas para fora dos limites da minha mesa.

Eu consertei isso fazendo algo realmente bobo; removendo todos os espaços entre as <td>tags de início e fim e justificando à esquerda a marcação HTML pertencente à minha tabela. Basicamente, você quer tudo <td> </td>na mesma linha, sem espaços.

Exemplo:

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

A solução dada a @Shanison ajuda apenas parcialmente, mas o problema persiste se houver espaços entre qualquer um dos outros elementos que podem fazer parte do modelo de conteúdo da tabela como thead, th etc.

Aqui está um regex melhor desenvolvido pelo meu líder no trabalho.

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

cobrindo todos os elementos table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th.

Nota: jQuery.browser foi removido no jQuery 1.9 e está disponível apenas por meio do plugin jQuery.migrate. Tente usar a detecção de recursos.

Corrigi esse problema removendo o espaço em branco:

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

O IE Blog menciona uma nova ferramenta hoje chamada de script Compat Inspector para ajudar a solucionar problemas de incompatibilidade de renderização do IE 9. Isso pode ajudar a solucionar seu problema.

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

Eu também estava tendo esse problema.

Ocorreu-me que o atributo de largura nas tags td / th causando esse problema.

Alterado para style = "largura: XXpx" e o problema está resolvido :)

Também me deparei com esse problema e percebi que isso acontecia quando eu estava colocando texto diretamente nos <td>elementos. Não tenho certeza se é um padrão ou não, mas depois de envolver qualquer texto em <span>elementos, os problemas de renderização desapareceram.

Então, em vez de:

<td>gibberish</td>

experimentar:

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

Encontrou um script muito útil para evitar células indesejadas em sua tabela html durante a renderização.

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

Esta função javascript você deve chamar quando a página carregar (isto é, evento onload)

Resposta tardia, mas espero poder ajudar alguém com isso. Tive o mesmo problema ao depurar no IE9. A solução foi remover todos os espaços em branco no código HTML. Ao invés de

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

eu tive que fazer

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

Isso parecia resolver o problema!

Este é o bug muito sério do IE9. No meu caso, remover apenas os espaços em branco entre os diferentes td não foi suficiente, portanto, removi os espaços entre os diferentes tr também. E está funcionando bem.

Eu tive um problema semelhante com o ie-9 ao renderizar uma tabela dinâmica.

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

quando renderizado se traduz em ...

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

isso funciona perfeitamente bem no 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>

você precisa escrever em 100pxvez de 100.

Tendo o mesmo problema de formatação com o ie9, e um novo problema com o ie11, onde formata corretamente, mas leva 25-40 segundos para renderizar uma tabela de cerca de 400 linhas e 9 colunas. Tem a mesma causa, espaço em branco dentro das tags tr ou td.

Estou exibindo uma tabela que é criada pela renderização de uma visão parcial de uma chamada AJAX. Decidi fazer o BFH no servidor removendo o espaço em branco da visualização parcial renderizada, usando um método postado aqui: http://optimizeasp.net/remove-whitespace-from-html

Esta é a sua solução copiada integralmente:

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

    }

E aqui está um método que retorna uma visão parcial como uma string, roubada de outra resposta do 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
        }
    }

Leva um pouco de tempo, mas menos de um segundo para renderizar uma tabela de cerca de 400 linhas, o que para meus objetivos é bom o suficiente.

Eu tive esse problema algumas vezes em tabelas geradas pelo Knockout. No meu caso, corrigi usando a solução jQuery encontrada aqui

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

Tive o mesmo problema com a grade KendoUI no IE10. Consegui forçar o IE a renderizar novamente as células da tabela ausentes com este hack:

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

Anexar um textNode vazio faz o IE renderizar novamente a tabela inteira.