colspan width issue

【问】

I'm having trouble setting fixed widths on columns which use colspan.

It seems that neither IE8, Firefox or Chrome can figure out how to correctly size columns with colspan.

Try the following code to see the problem in action:

<h2>One table with colspans, incorrect cell dimensions</h2>

<tr>

<tr>

</table>

<h2>Split tables, correct cell dimensions</h2>

<tr>

</table>

<tr>

</table>

Can anyone explain why this might be happening, and if there is a workaround.

EDIT:

have tried 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">

【答】

Because your column widths are contradicting. In row 1 you have columns widths 20, 50/2; in row 2 you have column widths 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.

You can't have overlapping colspans of different widths, the table cells need to line up. You're trying to draw this table:

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

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

Which is not valid since the columns don't line up. In order to do this you need to add more columns:

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

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

Where "." is a column that is hidden by the column span. Try this HTML:

<!DOCTYPE HTML>

<html>

    <head>

        <title>Test</title>

    </head>

    <body>

        <table border="1" style="table-layout: fixed;">

            <col style=" 20px;"/>

            <col style=" 30px;"/>

            <col style=" 20px;"/>

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