CSS如何設定表格邊框間的距離？ border-spacing屬性的使用
- 青灯夜游原創
- 2019-02-18 10:46:269006瀏覽
在CSS中，border-spacing屬性用於表格的邊框在「分離」的狀態下，設定相鄰單元格的邊框間的距離。以下這篇文章就來帶大家了解border-spacing屬性的使用方法，希望對大家有幫助。
CSS border-spacing屬性
border-spacing屬性會在表格邊框「分離」時，設定行和單元格的邊框在橫向和縱向上的間距。 【影片教學推薦：CSS教學】
它可以有1~2個length值：
● 如果提供全部兩個length值時，第一個作用於橫向間距，第二個作用於縱向間距。
● 如果只提供一個length值時，這個值將作用於橫向和縱向的間距。
說明：該border-spacing屬性的作用等同於HTML標籤屬性cellspacing。
註：只有當表格邊框各自獨立（即border-collapse屬性設定separate時）此屬性才會運作。
CSS border-spacing屬性的使用範例
#下面透過簡單程式碼範例來看看border-spacing屬性是如何設定表格邊框間的距離：
範例1：在設定border-collapse: collapse;時：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table,
td,
th {
border: 1px solid black;
}
td,th{
padding: 5px 20px;
}
#table1 {
border-collapse: collapse;
border-spacing: 15px;
}
</style>
</head>
<body>
<h2>border-spacing: 15px:</h2>
<p>使用“border-collapse:collapse”时，border-spacing属性无效：</p>
<table id="table1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Peter</td>
<td>20</td>
</tr>
<tr>
<td>Lois</td>
<td>20</td>
</tr>
</table>
</body>
</html>效果圖：
#範例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table,
td,
th {
border: 1px solid black;
}
td,th{
padding: 5px 20px;
}
#table2 {
border-collapse: separate;
border-spacing: 15px;
}
#table3 {
border-collapse: separate;
border-spacing: 15px 30px;
}
</style>
</head>
<body>
<h2>border-spacing: 15px:</h2>
<p>使用“border collapse:separate”时，border spacing属性可用于设置单元格之间的间距：</p>
<table id="table2">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Peter</td>
<td>20</td>
</tr>
<tr>
<td>Lois</td>
<td>20</td>
</tr>
</table>
<h2>border-spacing: 15px 30px:</h2>
<p>使用两个length值（第一个值设置水平间距，第二个值设置垂直间距）：</p>
<table id="table3">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Peter</td>
<td>20</td>
</tr>
<tr>
<td>Lois</td>
<td>20</td>
</tr>
</table>
</body>
</html>效果圖：
##程式碼說明：
邊框獨立時（border-collapse屬性設定separate時），border - spacing生效；相鄰邊合併時（border-collapse屬性設定collapse時），border - spacing屬性無效。 以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多精彩內容大家可以追蹤php中文網相關教學欄位！ ！ ！以上是CSS如何設定表格邊框間的距離？ border-spacing屬性的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn