IE7: Почему несвязанные клетки меняют ширину, когда содержимое ячеек colspan расширяется?

Question

Сначала, пожалуйста, взгляните на эту скрипку в IE7.Это несколько сложный процесс, и его не стоит здесь дублировать.

Желаемое поведение состоит в том, что нажатие на красный блок показывает некоторые дополнительные детали.Верхний ряд работает по желанию.Нижний ряд, в котором ширина деталей больше, демонстрирует поведение, которое я пытаюсь предотвратить.

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

Тестирование Firefox выявляет правильное поведение в обоих случаях: детали нижнего ряда появляются, но прыжки не происходят.У меня нет возможности тестировать в IE8 или IE9, поэтому я не знаю, происходит ли это и у них.

Итак, что здесь происходит?Почему это происходит?Как я могу заставить его не прыгать?

Приведенная выше скрипка показывает мою проблему в ее первоначальном контексте, но для дополнительного сужения вот версия без javascript, который пытался быть более минимальным.Обратите внимание, что удаление поля в 25px из самой внутренней таблицы просто скрывает проблему.Добавление еще одного набора ячеек покажет его снова.

Answer 1

IE ошибка colspan? но на самом деле это не ошибка - об этом сообщалось в IE6 / 7/8 (b1), но он считается недействительным, поскольку не определено поведение для того, как браузер должен отображать colspan, когда table-layout: auto неявно определяется.

Ваш обходной путь - установить для самой внешней таблицы значение table-layout: fixed и установить "ширину столбцов" в самой первой строке (.report-header). Так что уберите ширину 25px из ячейки expand/expanable и сделайте строку .report-header правильной ширины - вы можете установить для нее значение по умолчанию auto, если вам не нужна фактическая ширина.

тогда вы можете явно вернуть вложенную таблицу в table-layout: auto, если хотите

по сути, вот код, и я поместил тот же код в вашу скрипку, хотя извините, если я потерял некоторые биты, я упростил это во время тестирования ... если сейчас это не работает в IE7, тогда позвольте мне знаю, и я переделаю всю скрипку ..

Пример скрипки

CSS:

table {
   border-collapse: collapse;
   table-layout: fixed;
   width: 100%;
}

table table {
   width: auto; 
   table-layout: auto;
}

table,tr,td {
    margin:0;
    padding:0;
}

table {border: 1px solid #f00;}
/* td {border: 1px solid #00f;} was used in testing */


td.expanded, td.expandable {
    background-color:#f00;
}

tr.report-header {
    font-weight:bold;
}

/* give first row their column widths here */
tr.report-header td {width: 25px;} /* col 1 */
tr.report-header td+td {width: auto;}
tr.report-header td+td+td+td+td+td {width: 50px;} /* col 6 example */
/* end first row widths */

td.detail table, td.detail td {border: 0;}
tr.detail {display:none;}
td.detail {padding-left: 30px;}