CSS表格占兩個的方法很簡單,只需要使用colspan
屬性即可。該屬性指定了表格單元格跨越的列數,表示這個單元格會占據多少列的空間。
<table> <tr> <td colspan="2">第一行,占兩個單元格的表格</td> </tr> <tr> <td>第二行第一個單元格</td> <td>第二行第二個單元格</td> </tr> </table>
在上面的代碼中,第一行的單元格使用了colspan="2"
,表示該單元格要占據兩個單元格的寬度。因為第一行只有一個單元格,所以這個單元格占滿了整行。
在下面的第二行中,使用了兩個單元格來填補第一行留下的空隙,這些單元格都是普通的單元格,沒有使用colspan
屬性。
當然,也可以讓第二行的某個單元格跨越兩列。只需要在需要跨列的單元格上添加colspan="2"
即可。
<table> <tr> <td>第一行第一個單元格</td> <td colspan="2">第一行第二個單元格,占兩個單元格的表格</td> </tr> <tr> <td>第二行第一個單元格</td> <td>第二行第二個單元格</td> <td>第二行第三個單元格</td> </tr> </table>