溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何設(shè)置CSS表格邊框間的距離及border-spacing屬性的使用方法

發(fā)布時間：2020-07-09 18:01:10 來源：億速云 閱讀：1765 作者：Leah 欄目：web開發(fā)

這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)如何設(shè)置CSS表格邊框間的距離及border-spacing屬性的使用方法，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

CSS border-spacing屬性

border-spacing屬性會在表格邊框“分離”時，設(shè)置行和單元格的邊框在橫向和縱向上的間距。

它可以有1~2個length值：

●    如果提供全部兩個length值時，第一個作用于橫向間距，第二個作用于縱向間距。

●    如果只提供一個length值時，這個值將作用于橫向和縱向上的間距。

說明：該border-spacing屬性的作用等同于HTML標簽屬性cellspacing。

注：只有當表格邊框各自獨立（即border-collapse屬性設(shè)置separate時）此屬性才起作用。

CSS border-spacing屬性的使用示例

下面通過簡單代碼示例來看看border-spacing屬性是如何設(shè)置表格邊框間的距離：

示例1：在設(shè)置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>
		<h3>border-spacing: 15px:</h3>
		<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>

效果圖：

如何設(shè)置CSS表格邊框間的距離及border-spacing屬性的使用方法

示例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>
		<h3>border-spacing: 15px:</h3>
		<p>使用“border collapse:separate”時，border spacing屬性可用于設(shè)置單元格之間的間距：</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>

		<h3>border-spacing: 15px 30px:</h3>
		<p>使用兩個length值（第一個值設(shè)置水平間距，第二個值設(shè)置垂直間距）：</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>

效果圖：

如何設(shè)置CSS表格邊框間的距離及border-spacing屬性的使用方法

代碼說明：

邊框獨立時（border-collapse屬性設(shè)置separate時），border - spacing生效；相鄰邊被合并時（border-collapse屬性設(shè)置collapse時），border - spacing屬性無效。

上述就是小編為大家分享的如何設(shè)置CSS表格邊框間的距離及border-spacing屬性的使用方法了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手