提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 怎样运用CSS中的border-collapse属性【css教程】,border-collapse

CSS中的border-collapse属性是用来设置表格边框是不是兼并,它有三个值个中separate示意星散边框,collapse示意兼并边框,inherit 示意从父级那继续属性

在制造表格的时刻我们能够经由过程border-collapse 属性来使两个边框兼并为一个,使得边框结果越发雅观,本日将要引见怎样运用border-collapse 属性以及它的两个值的区分

【引荐课程:CSS教程】

border-collapse 属性的寄义:

border-collapse 属性是用来设置表格的边框是不是兼并成一个单一的边框,照样像在table中设置了border后边框单独离开显现

border-collapse 属性的值

separate

这个属性值代表的是边框会被离开,不会疏忽 border-spacing 和 empty-cells 属性,它是默许属性值

border-spacing:指的是相邻单元格的边框间的间隔,因而我们能够经由过程该属性来设置边框之间的间距

empty-cells:指的是是不是显现表格中的空单元格

注重:这两个属性都只能在星散边框中运用

table{
	font-size:16px;
	color:#333333;
	border-collapse: separate;
	border-spacing: 12px;
		}
	th{
	border:1px solid #444;
	padding:25px;

	}
	td{
	border:1px solid #444;
	padding: 15px;
	}

tr{
	background:rgb(207,238,252);
}
	</style>

结果图:

collapse

指的是将表格中的边框兼并为一个单一的边框,关于border-spacing 和 empty-cells 属性会自动疏忽

例:

<style>
		table{
	font-size:16px;
	color:#333333;
	border-collapse: collapse;
		}
	th{
	border:1px solid #444;
	padding:25px;

	}
	td{
	border:1px solid #444;
	padding: 15px;
	}

tr{
	background:rgb(207,238,252);
}
	</style>

结果图:

inherit

指的是从父元素那边继续border-collapse 属性的值。

separate 与collapse的区分:

separate值是示意边框会被星散不会兼并为一个边框,而collapse值示意的是边框会被兼并成单一的边框,而且会疏忽border-spacing 和 empty-cells 属性

总结:以上就是本篇文章的全部内容了,经由过程本篇文章愿望对人人进修表格款式有所协助。

以上就是怎样运用CSS中的border-collapse属性的细致内容,更多请关注ki4网别的相干文章!

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

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"怎样运用CSS中的border-collapse属性【css教程】,border-collapse"

最新评论

    暂无留言哦~~

博客简介

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

友情链接

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

服务热线:
 

 QQ在线交流

 旺旺在线