IE8 исключает столбцы из tbody

У меня проблема с отображением нескольких таблиц на странице.

Код таблицы довольно прост. CSS устанавливает ширину каждого td в %, а table-layout равен fixed.

Похоже, проблема вызвана тем, что в первой таблице есть X столбцов, а во второй — X + 3. Это приводит к тому, что последние столбцы исключаются из тела таблицы.

введите здесь описание изображения

При проверке DOM я вижу, что последние столбцы справа существуют вне тела таблицы (в дизайне), но существуют внутри тела таблицы в коде.

введите здесь описание изображения

Если я удаляю table-layout:fixed из css, таблицы перекрываются, но к последним столбцам применяются правильные цвета фона CSS и т. Д. Это также происходит, если я оставляю макет таблицы как есть, но удаляю атрибут width:100%. Таким образом, кажется, что это также может быть проблемой, когда фиксированная ширина таблицы сохраняется во всех таблицах, начиная с первой.

Я считаю, что это может быть сильно связано с этим ответом SO.

введите здесь описание изображения

Любые идеи?

<div>
    <table>
        // th elements
        <tbody>
            <tr>
               <td>1</td>
            </td>
        </tbody>
    </table>
</div>
<div>
    <table>
        // th elements
        <tbody>
            <tr>
               <td>1</td>
               <td>2</td>
            </tr>
        </tbody>
    </table>
</div>

html css html-table internet-explorer-8 tablelayout
person RonnyKnoxville    schedule 07.01.2015    source источник
comment
@chovy, этот проект для крупной корпорации. Я думаю, что решить мою проблему может быть проще, чем обновить все машины компании.   -  person RonnyKnoxville    schedule 07.01.2015
comment
вы могли бы сделать jsfiddle с некоторыми данными... чтобы люди могли играть...   -  person Mihai Iorga    schedule 07.01.2015
comment
старый способ мышления. теперь вечнозеленый. ничего больше. мне все равно, если ‹ IE11 не работает.   -  person chovy    schedule 07.01.2015
comment
Это больше национальная безопасность, чем старый образ мышления   -  person RonnyKnoxville    schedule 29.01.2015

Ответы (1)


arrow_upward
0
arrow_downward

Решение этого было вроде того, что я ожидал.

Оказывается, IE (и некоторые другие браузеры) будут основывать все макеты таблиц на основе первой строки первой таблицы.

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

Некоторые люди предлагали использовать атрибуты colgroup и col над thead, но я обнаружил, что это не работает для меня.

Вместо этого я создал скрытый thead над моим оригиналом, содержащий максимальное количество необходимых столбцов.

    <thead>
        <tr hidden="hidden">
            <th span="1"></th>
            <th span="3"></th>
            <th span="3"></th>
            <th span="3"></th>
            <th span="1"></th>
            <th span="2"></th>
        </tr>
    </thead>
    <thead>
        // My actual table headers
    </thead>
person RonnyKnoxville    schedule 07.01.2015