CSS如何设置表格边框间的距离？border-spacing属性的使用

互联网 19-2-18

在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>

效果图：