让两个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

如果表格总是像你所说的那样，你可以尝试例如第n个子伪类选择器：

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

它将始终影响表中的偶数/第二行。