Как уберечь свой стол от "сгибания" в IE6 / 7

Question

У меня есть некоторые табличные данные с некоторыми функциями для «просмотра деталей», которые запускают Ajax-вызов, чтобы добавить несколько новых элементов в DOM (обычно я вставляю другой TR сразу после выбранной строки и innerHTML или добавляю внутри TD с кольспан.

Мой вопрос такой: в IE6 / 7 мои столбцы сгибаются. В настоящее время у меня нет «статической» ширины на столбец, и я хотел бы избежать этого, если это возможно.

Какие-либо предложения, чтобы избежать этого "сгибания"?

Answer 1

Этот трюк здесь использует несколько эзотерическое table-layout:fixed правило

Используйте это так:

table {table-layout:fixed}

Вы также должны указать явную ширину столбца для <td> s.

Правило table-layout:fixed гласит: «Ширина ячеек в этой таблице зависит от того, что я говорю, а не от фактического содержимого в ячейках». Обычно это полезно, потому что браузер может начать отображать таблицу после того, как он получил первый <tr>. В противном случае браузер должен получить всю таблицу, прежде чем он сможет вычислить ширину столбцов. Однако в вашем случае также полезно поддерживать абсолютную ширину столбцов.

Answer 2

Когда вы говорите, flex, вы имеете в виду изменить размер? Помните, что если вы изменяете что-либо в DOM и перерисовываете его, то будет действовать так же, как когда он впервые отображал элемент на странице. Лучшие результаты, которые я видел с таблицами, - это очистка их контейнера, сборка таблицы и добавление ее в контейнер.

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

Answer 3

Размер таблиц изменяется динамически в зависимости от содержимого. Это их природа. Вы всегда можете прочитать «естественную» ширину столбца таблицы при ее рендеринге, а затем применить стиль, чтобы зафиксировать эту форму, прежде чем выполнять Ajax-вызов.