有两个html表格单元总宽度是否保持在给定的宽度范围内？

Question

我有一个使用colspan=2的html表来合并单元格。我需要确保合并的单元格具有给定的宽度。但是，当两个单元格未合并时，我需要使其总宽度不超过合并单元格的宽度。我怎样才能实现后者？

在第一个表中，合并单元格中的文本被包装，这很好。

在第二个表中，未合并的单元格中的文本未被包装，这使得表格太宽。

我创建了一个JSFiddle。

我的HTML是：

<table border="1">
    <tr>
        <td>xyz 1</td>  
        <td>xyz 2</td>  
        <td>xyz 3</td>  
        <td>xyz 4</td>  
    </tr>
    <tr>
        <td colspan="2" class="twoColWidth">
            xyz aaaa ffffffffffffff
        </td>  
        <td colspan="2" class="twoColWidth">
            xyz bbbb fff
        </td>  
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <td>xyz 1 33333 444444</td>  
        <td>xyz 2</td>  
        <td>xyz 3</td>  
        <td>xyz 4 33333 444444</td>  
    </tr>
    <tr>
        <td colspan="2" class="twoColWidth">
            xyz aaaa ffffffffffffff
        </td>  
        <td colspan="2" class="twoColWidth">
            xyz bbbb fff
        </td>  
    </tr>
</table>

我的CSS是：

.twoColWidth {
    width: 50px;
}

Answer 1

为表格提供固定宽度，并使用colgroup与col一起为所有列提供相同的宽度：

<table border="1" style="width: 175px;">
    <colgroup>
        <col span="4" width="25%" />
    </colgroup>
    <tr>
        <td>xyz 1</td>  
        <td>xyz 2</td>  
        <td>xyz 3</td>  
        <td>xyz 4</td>  
    </tr>
    <tr>
        <td colspan="2">
            xyz aaaa ffffffffffffff
        </td>  
        <td colspan="2">
            xyz bbbb fff
        </td>  
    </tr>
</table>

Answer 2

table {width：100px; } 只设置整个表的最大宽度？

Answer 3

如果表格总是如您所述，您可以尝试例如nth-child伪类选择器：

tr:nth-child(2) {
    width:20px;
}

它会影响表中的偶数/第二行。