CSS border-collapse屬性用法及代碼示例

此 CSS 屬性用於設置表格單元格的邊框，並指定表格單元格是共享單獨邊框還是公共邊框。

該屬性有兩個主要值，分別是獨立的和折疊的。當它設置為單獨的值時，可以使用 border-spacing 屬性定義單元格之間的距離。當border-collapse 設置為collapse 值時，border-style 屬性的inset 值表現為groove，而outset 值表現為ridge。

用法

border-collapse:separate | collapse | initial | inherit;

此 CSS 屬性的值定義如下。

屬性值

separate:它是分隔表格單元格邊框的默認值。使用此值，每個單元格將顯示自己的邊框。

collapse:此值用於將邊框折疊為單個邊框。使用它，兩個相鄰的表格單元格將共享一個邊框。應用此值時，border-spacing 屬性不受影響。

initial:它將屬性設置為其默認值。

inherit:它從其父元素繼承屬性。

現在，讓我們通過一些例子來理解這個 CSS 屬性。在第一個示例中，我們使用 border-collapse 屬性的單獨值。在第二個示例中，我們使用 border-collapse 屬性的折疊值。

示例 - 使用單獨的值

有了這個值，我們就可以使用 border-spacing 屬性來設置相鄰表格單元格之間的距離。

<!DOCTYPE html>
<html>

<head>
<title> border-collapse property </title>
<style>
table{
border:2px solid blue;
text-align:center;
font-size:20px;
width:80%;
height:50%;
}
th{
border:5px solid red;
background-color:yellow;
}
td{
border:5px solid violet;
background-color:cyan;
}
#t1 {
border-collapse:separate;
}
</style>
</head>

<body>

<h1> The border-collapse Property </h1>
<h2> border-collapse:separate; </h2>
<table id = "t1">
<tr>
<th> First_Name </th>
<th> Last_Name </th>
<th> Subject </th>
<th> Marks </th>
</tr>
<tr>
<td> James </td>
<td> Gosling </td>
<td> Maths </td>
<td> 92 </td>
</tr>
<tr>
<td> Alan </td>
<td> Rickman </td>
<td> Maths </td>
<td> 89 </td>
</tr>
<tr>
<td> Sam </td>
<td> Mendes </td>
<td> Maths </td>
<td> 82 </td>
</tr>
</table>
</body>

</html>

輸出

示例 - 使用折疊屬性

border-spacing 和 border-radius 屬性不能與此值一起使用。

<!DOCTYPE html>
<html>

<head>
<title> border-collapse property </title>
<style>
table{
border:2px solid blue;
text-align:center;
font-size:20px;
width:80%;
height:50%;
}
th{
border:5px solid red;
background-color:yellow;
}
td{
border:5px solid violet;
background-color:cyan;
}
#t1{
border-collapse:collapse;
}
</style>
</head>

<body>

<h1> The border-collapse Property </h1>
<h2> border-collapse:collapse; </h2>
<table id = "t1">
<tr>
<th> First_Name </th>
<th> Last_Name </th>
<th> Subject </th>
<th> Marks </th>
</tr>
<tr>
<td> James </td>
<td> Gosling </td>
<td> Maths </td>
<td> 92 </td>
</tr>
<tr>
<td> Alan </td>
<td> Rickman </td>
<td> Maths </td>
<td> 89 </td>
</tr>
<tr>
<td> Sam </td>
<td> Mendes </td>
<td> Maths </td>
<td> 82 </td>
</tr>
</table>
</body>
</html>

輸出

相關用法

注：本文由純淨天空篩選整理自 CSS border-collapse property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。