вопрос ширины колспана - PullRequest
22 голосов
/ 21 марта 2011

У меня проблемы с установкой фиксированной ширины для столбцов, которые используют 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>

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

РЕДАКТИРОВАТЬ:

пробовали типы документов

<!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">

Ответы [ 2 ]

29 голосов
/ 21 марта 2011

Потому что ширина вашего столбца противоречит. В строке 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.

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

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

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

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

Где "." это столбец, который скрыт столбцом span Попробуйте этот 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>
4 голосов
/ 09 декабря 2011

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...