如何使用CSS设置表格边框间的距离?

在CSS中可以使用border-spacing属性来设置表格边框间的距离;border-spacing属性用于设置表中相邻单元格边框之间的距离。此属性仅当border-collapse属性设置为separate或在HTML标签中设置cellspacing属性时才有效。

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

语法:

border-spacing:length[-length];

属性值:它可以有1~2个length值

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

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

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>border-spacing属性</title> 
		<style> 
            table, th, td { 
	            border: 2px solid #3E8F3E; 
	            text-align: center; 
	        } 
	          
	        #demo { 
	            border-collapse: separate; 
	            background-color: none; 
	            border-spacing: 20px 40px; 
	        } 
	          
	        h2 { 
	            color: green; 
	        } 
        </style> 
    </head> 
    <body> 
    <center> 
        <h2>border-spacing属性</h2> 
        <h3>border-spacing: 20px 40px;</h3> 
        <table style="width:70%" id="demo"> 
            <tr> 
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr> 
            <tr> 
                <td>晓华</td>
                <td>15</td> 
                <td>女</td> 
            </tr> 
            <tr> 
                <td>天健</td>
                <td>27</td> 
                <td>男</td> 
            </tr> 
            <tr> 
                <td>邓琴</td>
                <td>28</td>
                <td>女</td>
            </tr> 
        </table> 
    </center> 
</body> 
  
</html>

效果图:

ed61d0683741083c702979d8480b56e.png

浏览器支持

CSS border spacing属性支持的浏览器如下:

● 谷歌Chrome 1.0

● Internet Explorer 8.0

● Firefox 1.0

● Opera 4.0

● Safari 1.0

以上就是如何使用CSS设置表格边框间的距离?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏