表格行的不同寬度

我嘗試拆分中間行並保持上部行和底部原樣。表格行的不同寬度

<table border="1" width="500"> 
 
    <tbody> 
 
     <tr bgcolor="red"> 
 
      <td width="10%">&nbsp;</td> 
 
      <td width="80%">&nbsp;</td> 
 
      <td width="10%">&nbsp;</td> 
 
     </tr> 
 
     <tr bgcolor="green"> 
 
      <td width="50%" colspan="2">&nbsp;</td> 
 
      <td width="50%">&nbsp;</td> 
 
     </tr> 
 
     <tr bgcolor="blue"> 
 
      <td colspan="3">&nbsp;</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

如何中間行拆分爲兩個相等的列，使用一個表的標籤？

來源

2016-11-27 blsn

不要使用'border'屬性。不要使用'width'屬性。不要使用'bgcolor'屬性。當你想要的東西不同於防止單詞之間的中斷時，不要使用' '。 – Oriol

Thx的評論，我只是爲了簡化問題。 – blsn

添加多個列跨度：

table { 
 
    width: 500px; 
 
    table-layout: fixed; 
 
    border: 1px outset; 
 
} 
 
tr:nth-child(1) > td:nth-child(2) { 
 
    width: 80%; 
 
} 
 
td::after { 
 
    content: '\200B'; /* Insert zero-width space */ 
 
} 
 
table { border: 1px outset; } 
 
td { border: 1px inset; } 
 
tr:nth-child(1) { background: red; } 
 
tr:nth-child(2) { background: green; } 
 
tr:nth-child(3) { background: blue; }

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td></td> 
 
     <td colspan="2"></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2"></td> 
 
     <td colspan="2"></td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="4"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2016-11-27 15:58:44 Oriol

<table border="1" width="500"> 
    <tbody> 
    <tr bgcolor="red"> 
    <td idth="10%">&nbsp;</td> 
    <td width="80%" colspan="2">&nbsp;</td> 
    <td width="10%">&nbsp;</td> 
    </tr> 
    <tr bgcolor="green"> 
    <td width="50%" colspan="2">&nbsp;</td> 
    <td width="50%" colspan="2">&nbsp;</td> 
    </tr> 
    <tr bgcolor="blue"> 
    <td width="100%" colspan="4">&nbsp;</td> 
    </tr> 
    </tbody> 
</table>

來源

2016-11-27 16:02:22

請求是保持上面的行和底部原樣！ – blsn

我的不好。現在修好。乾杯 –

表格行的不同寬度

回答

相關問題