电话
13363039260
CSS如何设置表格边框间的距离？
2024-01-17 15:39 小编
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>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Peter</td>
<td>20</td>
</tr>
<tr>
<td>Lois</td>
<td>20</td>
</tr>
</table>
</body>
</html>
猜你喜欢
联络方式：
13363039260
微信二维码 