Шина colspan

У меня возникают проблемы с установкой фиксированной ширины в столбцах, которые используют colspan.

Кажется, что ни IE8, ни Firefox, ни Chrome не могут понять, как правильно сортировать столбцы с colspan.

Попробуйте следующий код, чтобы увидеть проблему в действии:

<h2>One table with colspans, incorrect cell dimensions</h2>
<table border="1">
<tr>
    <td style="width:20px;">20</td>
    <td style="width:50px;" colspan="2">50</td>
    <td>a</td>
    <td>a</td></tr>
<tr>
    <td style="width:50px;" colspan="2">50</td>
    <td style="width:20px;">20</td>
    <td>a</td>
    <td>a</td></tr>
</table>

<h2>Split tables, correct cell dimensions</h2>
<table border="1">
<tr>
    <td style="width:20px;">20</td>
    <td style="width:50px;">50</td>
    <td>a</td>
    <td>a</td></tr>
</table>
<table border="1">
<tr>
    <td style="width:50px;">50</td>
    <td style="width:20px;">20</td>
    <td>a</td>
    <td>a</td></tr>
</table>

Может кто-нибудь объяснить, почему это может произойти, и если есть обходной путь.

EDIT:

попробовали doctypes

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ответ 1

Потому что ваши ширины столбцов противоречат друг другу. В строке 1 указаны столбцы шириной 20, 50/2; в строке 2 у вас ширина столбцов 50/2, 20.

Row 1, Column 1 is defined as 20.
Row 1, Column 2 is defined as 50.
Row 2, Column 1 is defined as 50.
Row 2, Column 2 is defined as 20.

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

|-----|----------|
|----------|-----|

Это недействительно, поскольку столбцы не выстраиваются в линию. Для этого вам нужно добавить дополнительные столбцы:

|-----|----.-----|
|-----.----|-----|

Где "." - это столбец, который скрыт от столбца. Попробуйте этот HTML-код:

<!DOCTYPE HTML>

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <table border="1" style="table-layout: fixed;">
            <colgroup>
                <col style="width: 20px;"/>
                <col style="width: 30px;"/>
                <col style="width: 20px;"/>
            </colgroup>
            <tbody>
                <tr>
                    <td>20</td>
                    <td colspan="2">50</td>
                </tr>
                <tr>
                    <td colspan="2">50</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Ответ 2

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

Чтобы сделать длинный рассказ коротким, colspan в первой строке, когда вы хотите установить ширину столбцов на последующих строках, десны вверх по работам. Есть много хороших способов исправить это, плохой способ, однако легко было бы иметь самую первую строку с 1 пикселем высоты, устанавливающую тренд для ширины столбцов.