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

这期内容当中小编将会给大家带来有关如何设置CSS表格边框间的距离及border-spacing属性的使用方法，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

创新互联专注于坊子企业网站建设,响应式网站建设,商城系统网站开发。坊子网站建设公司,为坊子等地区提供建站服务。全流程按需定制设计，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

CSS border-spacing属性

border-spacing属性会在表格边框“分离”时，设置行和单元格的边框在横向和纵向上的间距。

它可以有1~2个length值：

●    如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。

●    如果只提供一个length值时，这个值将作用于横向和纵向上的间距。

说明：该border-spacing属性的作用等同于HTML标签属性cellspacing。

注：只有当表格边框各自独立（即border-collapse属性设置separate时）此属性才起作用。

CSS border-spacing属性的使用示例

下面通过简单代码示例来看看border-spacing属性是如何设置表格边框间的距离：

示例1：在设置border-collapse: collapse;时：

	
		
		
	

	
		
border-spacing: 15px:
		
使用“border-collapse:collapse”时，border-spacing属性无效：
		

			

				
姓名
				
年龄
			
			

				
Peter
				
20
			
			

				
Lois
				
20
			
		
	

效果图：

示例2：

	
		
		
	

	
		
border-spacing: 15px:
		
使用“border collapse:separate”时，border spacing属性可用于设置单元格之间的间距：
		

			

				
姓名
				
年龄
			
			

				
Peter
				
20
			
			

				
Lois
				
20
			
		

		
border-spacing: 15px 30px:
		
使用两个length值（第一个值设置水平间距，第二个值设置垂直间距）：
		

			

				
姓名
				
年龄
			
			

				
Peter
				
20
			
			

				
Lois
				
20
			
		

	

效果图：

代码说明：

边框独立时（border-collapse属性设置separate时），border - spacing生效；相邻边被合并时（border-collapse属性设置collapse时），border - spacing属性无效。

上述就是小编为大家分享的如何设置CSS表格边框间的距离及border-spacing属性的使用方法了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。