旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

CSS怎样设置表格边框间的间隔?border-spacing属性的运用【css教程】

作者:搜搜PHP网发布时间:2019-11-26分类:CSS浏览:106


导读:在CSS中,border-spacing属性用于表格的边框在“星散”的状态下,设置相邻单元格的边框间的间隔。下面本篇文章就来带人人相识一下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>

效果图:

代码申明:

边框自力时(border-collapse属性设置separate时),border - spacing见效;相邻边被兼并时(border-collapse属性设置collapse时),border - spacing属性无效。

以上就是本篇文章的悉数内容,愿望能对人人的进修有所协助。更多精彩内容人人能够关注ki4网相干教程栏目!!!

以上就是CSS怎样设置表格边框间的间隔?border-spacing属性的运用的细致内容,更多请关注ki4网别的相干文章!

标签:CSSborder-spacing属性表格边框距离