如何操縱桌子到這個形狀？

Question

我需要在HTML中創建這個形狀。 我剛剛瞭解了colspan和rowspan，但是這讓我吃驚...... 感謝您的幫助。

表：

Answer 1

不能合併像倒L形的TD。相反，這可以通過調整邊框樣式來完成。

table { 
 
border-collapse: collapse; 
 
}

<table width="300" border="1px"> 
 
<tr> 
 
    <td colspan="2" height="30" style="border-bottom: 0"> 
 
     &nbsp; 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td width="30" style="border-top: 0"> 
 
     &nbsp; 
 
    </td> 
 
    <td height="200"> 
 
     &nbsp; 
 
    </td> 
 
</tr> 
 
</table>

Answer 2

沒有rowspan或colspan，:first-child和+選擇也可以幫助你。

no matters the numbers of row or column ;)

table { 
 
    border-collapse:collapse; 
 
    border:solid; 
 
} 
 
th, td { 
 
    min-width:3em; 
 
    height:3em; 
 
} 
 

 
tr td:first-child { 
 
    border-right:solid; 
 
} 
 
th + th { 
 
    border-bottom:solid 
 
}

<table> 
 
\t <thead> 
 
\t \t <tr> 
 
\t \t \t <th></th> 
 
\t \t \t <th></th> 
 
\t \t \t <th></th> 
 
\t \t \t <th></th> 
 
\t \t </tr> 
 
\t </thead> 
 
\t <tbody> 
 
\t \t <tr> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table>