提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > CSS怎样设置表格边框间的间隔?border-spacing属性的运用【css教程】,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>

效果图:

代码申明:

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

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

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

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS怎样设置表格边框间的间隔?border-spacing属性的运用【css教程】,CSS,border-spacing属性,表格边框距离"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线