如何處理表格最後一行的colSpan？

Question

如何使鏈接中給定表格中的最後兩個條目以某種方式顯示，以便它們共享表格總寬度的50％，例如，colSpan應爲1.5，但這是不可能的。

https://jsfiddle.net/3uLt69yt/

<table> 
<tr> 
<th>Month</th> 
<th>Savings</th> 
<th>Savings</th> 
</tr> 
<tr> 
<td>January</td> 
<td>$100</td> 
<td>$100</td> 
</tr> 
<tr> 
<td>February</td> 
<td>$100</td> 
<td>$100</td> 
</tr> 
<tr> 
<td colspan="3">Sum: $180</td> 
</tr> 
<tr> 
<td colspan="1">Sum: $180</td> 
<td colspan="1">Sum: $180</td> 
</tr> 
</table> 

Answer 1

因爲你有三列，並希望最後兩個單元跨越1.5列–這是不可能的，colspan只能–你必須通過一個數字，結果乘以1.5的正整數工作在那些橫跨許多列的兩個單元中。在這種情況下該乘數是2

爲了做到這一點，那麼，你只需要更新別處每一個細胞具有colspan屬性其當前colspan值（這些細胞沒有colspan屬性，因此僅跨越一列倍增，必須給予colspan="2"），像這樣：

table, 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
}

<table> 
 
    <tr> 
 
    <th colspan="2">Month</th> 
 
    <th colspan="2">Savings</th> 
 
    <th colspan="2">Savings</th> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">January</td> 
 
    <td colspan="2">$100</td> 
 
    <td colspan="2">$100</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">February</td> 
 
    <td colspan="2">$100</td> 
 
    <td colspan="2">$100</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="6">Sum: $180</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="3">Sum: $180</td> 
 
    <td colspan="3">Sum: $180</td> 
 
    </tr> 
 
</table>

更新JS Fiddle demo。

這感覺像哈克變通一點，但它是有效的HTML，並避免產生任何新的元素–雖然<table>現在明確有六列，而不是原來的三;儘管沒有創建新元素，但它們是隱含的，而不是HTML中的「存在」。

從用戶界面的角度來看，還值得注意的是，跨過表格寬度的一半的最後兩個單元格–與表格標題沒有任何明確的相關性，這可能會（或可能不會）混淆您的網站的用戶。