Я создаю приложение, которое позволяет пользователю управлять структурой таблицы, добавляя и удаляя столбцы и строки, устанавливая ширину столбцов и диапазон ячеек, а также вставляя элементы в ячейки таблицы.Во время тестирования я столкнулся со сценарием, в котором Firefox 4 и Internet Explorer 8 отображают таблицу так, как я ожидаю, а Google Chrome 11 - нет.Я использую макет таблицы: авто, и я знаю, что CSS не определяет алгоритм рендеринга, который будет использоваться в этом случае (http://www.w3.org/TR/CSS21/tables.html, раздел 17.5.2.2).Тем не менее, я хотел бы иметь согласованные представления в трех упомянутых браузерах, если это возможно.
Вот очень простой сценарий, чтобы проиллюстрировать различный рендеринг (попробуйте его в Chrome и Firefox / IE, чтобы увидеть разницу):http://jsbin.com/ayuja4/3
Несмотря на то, что таблица достаточно широка, чтобы содержать синий div (поскольку первый столбец установлен на 200 пикселей, а второй столбец, хотя и имеет ширину 100 пикселей, должен быть расширен до 300 пикселей, чтобысодержит зеленый div), в Chrome первый столбец расширен за пределы 200 пикселей.Это приводит к дополнительному, ненужному месту в последнем ряду, и это именно то, чего я пытаюсь избежать.
Какие-нибудь идеи, чтобы эта таблица выглядела в Chrome так же, как в Firefox и Internet Explorer?Мне не нужен чистый HTML / CSS подход - манипулирование таблицей с помощью JavaScript является допустимым вариантом, если это решает мою проблему.Я уже рассматривал возможность использования фиксированной компоновки таблицы, но это приведет к дополнительным усилиям по обработке элементов, которые шире столбцов, поэтому это последнее средство.