CSS怎样设置表格边框间的间隔？border-spacing属性的运用【html5教程】,CSS,border-spacing属性,表格边框距离

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

效果图：