html - 有两个 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

给你的表格一个固定的宽度，并使用colgroupwithcol给所有的列提供相同的宽度：

<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

表{宽度：100px；} 只是为整个表格设置一个最大宽度？

Answer 3

如果表格总是像您所说的那样，您可以尝试例如 nth-child 伪类选择器：

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

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