CSS如何设置表格边框间的距离？border-spacing属性的使用-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

在CSS中，border-spacing属性用于表格的边框在“分离”的状态下，设置相邻单元格的边框间的距离。下面本篇文章就来带大家了解一下border-spacing属性的使用方法，希望对大家有所帮助。

CSS border-spacing属性

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

它可以有1~2个length值：

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

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

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

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

CSS border-spacing属性的使用示例

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

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

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <style>
            table,
            td,
            th {
                border: 1px solid black;
            }
            td,th{
                padding: 5px 20px;
            }
             
            #table1 {
                border-collapse: collapse;
                border-spacing: 15px;
                 
            }
        </style>
    </head>
 
    <body>
        <h2>border-spacing: 15px:</h2>
        <p>使用“border-collapse:collapse”时，border-spacing属性无效：</p>
        <table id="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>