有两个 html 表格单元格的总宽度保持在给定的宽度内？答案

【问题标题】：Having two html table cells total width stay within given width?有两个 html 表格单元格的总宽度保持在给定的宽度内？
【发布时间】：2013-06-22 14:13:01
【问题描述】：

我有一个使用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;
}

【问题讨论】：

标签： html merge html-table width cell

【解决方案1】：

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

【讨论】：

这是一个问题还是一个答案？详细说明并确定它！

【解决方案2】：

给你的表格一个固定宽度，并使用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>

【讨论】：

它在大多数情况下都有效，对我来说已经足够好了...（它不适用于一些牢不可破的大词，但话又说回来，我可以让桌子大一点...）

【解决方案3】：

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

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

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

【讨论】：