有兩個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表格單元總寬度保持在給定的寬度內？

回答

相關問題