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

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

enter image description here

在第一个表，在合并后的细胞中的文本被包裹，这是好的。

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

我已创建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; 
}

来源

2013-06-25 JVerstry

给你的表修复宽度，并使用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>

来源

2013-06-25 17:57:01 LinkinTED

它在大多数情况下都很有效，对我来说足够好...（它不适用于一些大的牢不可破的词语，但是再次，我可以使桌子变大一点......） – JVerstry

表{宽度：100像素; } 只需设置整个表的最大宽度？

来源

2013-06-25 17:06:23 danecando

这是一个问题或答案？详细阐述并且确定它！ –

如果表将永远像你所说，你可以尝试例如nth-child伪级选择器：

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

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

来源

2013-06-25 19:06:34

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

回答

相关问题