CSS如何设置表格边框间的距离？

　　CSSborder-spacing属性

　　border-spacing属性会在表格边框“分离”时，设置行和单元格的边框在横向和纵向上的间距。【视频教程推荐：CSS教程】

　　它可以有1~2个length值：

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

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

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

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

　　CSSborder-spacing属性的使用示例

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

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

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　<style>

　　table,

　　td,

　　th{

　　border:1pxsolidblack;

　　}

　　td,th{

　　padding:5px20px;

　　}

　　#table1{

　　border-collapse:collapse;

　　border-spacing:15px;

　　}

　　</style>

　　</head>

　　<body>

　　<h2>border-spacing:15px:</h2>

　　<p>使用“border-collapse:collapse”时，border-spacing属性无效：</p>

　　<tableid="table1">

　　<tr>

　　</tr>

　　<tr>

　　<td>Peter</td>

　　</tr>

　　<tr>

　　</tr>

　　</table>

　　</body>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/rumen/r54160.shtml