border-collapse屬性用于控制表格的邊框是否合并。
當border-collapse的值為collapse時,相鄰單元格的邊框會合并為一個單一的邊框,表格看起來更加緊湊。而當border-collapse的值為separate時,相鄰單元格的邊框保持分開,表格看起來更加明顯。
下面是一個使用border-collapse屬性的簡單示例:
HTML代碼:
<table>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>
CSS代碼:
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 10px;
}
在上面的示例中,我們將表格的border-collapse屬性設置為collapse,使相鄰單元格的邊框合并為一個單一的邊框。然后,我們為每個單元格設置了1像素的黑色邊框和10像素的內邊距。
運行示例后,我們將會看到表格的邊框被合并為一個單一的邊框,表格看起來更加緊湊。