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

任何人都可以解释为什么会发生这种情况,如果有解决办法。

编辑:

尝试了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中,列宽为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;">
            <col style="width: 20px;"/>
            <col style="width: 30px;"/>
            <col style="width: 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>
翻译自:https://stackoverflow.com/questions/5373893/colspan-width-issue

转载注明原文:html – colspan宽度问题