Internet Explorer 9 неправильно отображает ячейки таблицы

У меня точно такая же проблема. вы можете прочитать этот https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables

Вы можете удалить пространство между td с помощью javascript, если ваш html возвращается из ajax, а затем из ответа вы заменяете его на

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

У меня была такая же проблема с заполнением таблицы с использованием шаблонов jquery. Я продолжал иметь "призрак" <td> в больших наборах данных (300+) только в IE9. Эти <td> будут выталкивать внешние столбцы за пределы моей таблицы.

Я исправил это, сделав что-то действительно глупое; удаление всех пробелов между начальным и конечным тегами <td> и выравнивание по левому краю разметки HTML, относящейся к моей таблице. По сути, вы хотите, чтобы все ваши <td> </td> были в одной строке, без пробелов.

Пример:

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

Решение, данное @Shanison, помогает лишь частично, но проблема сохраняется, если между любыми другими элементами, которые могут быть частью модели содержимого таблицы, такими как thead, th и т. Д., Есть пробелы.

Вот лучшее регулярное выражение, разработанное моим руководителем на работе.

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

охватывает все элементы table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th.

Примечание. JQuery.browser был удален в jQuery 1.9 и доступен только через плагин jQuery.migrate. Попробуйте вместо этого использовать функцию обнаружения.

Я исправил эту проблему, удалив пробел:

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 упоминается о новом инструменте, который сегодня называется скрипт Compat Inspector, который помогает устранять неполадки, связанные с несовместимостью рендеринга IE 9. Это может помочь устранить вашу проблему.

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

У меня тоже была эта проблема.

Мне пришло в голову, что этот атрибут ширины в тегах td / th вызвал эту проблему.

Изменил его на style = "width: XXpx", и проблема решена :)

Я тоже столкнулся с этой проблемой и понял, что это произошло, когда я напрямую помещал текст в <td> элементы. Я не уверен, стандарт это или нет, но после переноса любого текста в <span> элементы проблемы с рендерингом исчезли.

Так что вместо:

<td>gibberish</td>

пытаться:

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

Обнаружен очень полезный скрипт для предотвращения нежелательных ячеек в вашей html-таблице во время рендеринга.

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

Эту функцию javascript, которую следует вызывать при загрузке страницы (т.е. при событии onload).

Поздний ответ, но, надеюсь, я смогу кому-то с этим помочь. У меня возникла такая же проблема при отладке в IE9. Решением было удаление всех пробелов в HTML-коде. Вместо

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

Я должен был сделать

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

Казалось, это решило проблему!

Это очень серьезная ошибка IE9. В моем случае удаления только пробелов между разными td было недостаточно, поэтому я также удалил пробелы между разными tr. И он работает нормально.

У меня была аналогичная проблема с IE-9 при рендеринге динамической таблицы.

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

при рендеринге переводится как ...

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

это отлично работает в 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>

вам нужно написать 100px вместо 100.

Имеется такая же проблема форматирования с ie9 и новая проблема в ie11, где он форматируется правильно, но для визуализации таблицы из примерно 400 строк и 9 столбцов требуется 25-40 секунд. У него та же причина - пробелы внутри тегов tr или td.

Я показываю таблицу, созданную путем рендеринга частичного представления из вызова AJAX. Я решил BFH его на сервере, удалив пробелы из визуализированного частичного представления, используя метод, размещенный здесь: http://optimizeasp.net/remove-whitespace-from-html

Это его решение, скопированное 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();

    }

А вот метод, который возвращает частичное представление в виде строки, украденной из другого ответа 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
        }
    }

Для отрисовки таблицы из примерно 400 строк требуется немного времени, но менее секунды, что для моих целей достаточно.

У меня иногда возникала эта проблема на таблицах, созданных Knockout. В моем случае я исправил это с помощью найденного здесь решения jQuery

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

У меня была такая же проблема с сеткой KendoUI в IE10. Я смог заставить IE повторно отображать отсутствующие ячейки таблицы с помощью этого хака:

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

Добавление пустого textNode заставляет IE повторно визуализировать всю таблицу.