Question

我在使用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">

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

Answer 2

它与浏览器计算每列宽度的方式有关。表格需要更多的开销，因为它们具有灵活性，并且根据您设置的内容和内容而超过1次。

总而言之，如果要在后续行设置列宽，请在第一行进行colspan。有很多好方法可以修复它，这是一种不好的方法，不过很容易就是让第一行的高度为1像素设置列宽的趋势。

colspan宽度问题

2 个答案: