border-collapse: collapse；和cellspacing=“0“有什么区别呢？

阿珂要努力呀

已于 2023-10-07 08:36:42 修改

阅读量745

点赞数 2

分类专栏： HTML+CSS 文章标签：前端 html css

于 2022-11-11 16:39:38 首次发布

本文链接：https://blog.csdn.net/qq_43423011/article/details/127808463

版权

HTML+CSS 专栏收录该内容

8 篇文章

订阅专栏

border-collapse

CSS属性，用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

cellspacing

cellspacing 属性规定单元格之间的空间。

从以上定义可以看出，border-collapse实现一个边框的合并问题，也就是**相邻边框会变成一条边框显示**。而，cellspacing只能定义相邻边框之间的间距，也就是说**两条边框还独立存在，并未合并为一条边框**。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            height: 308px;
        }
        table,
        td {
            padding: 0;
            border: 1px solid pink;
            border-top: 1px solid blue;
            /* border-collapse: collapse; */
        }
    </style>
</head>

<body>
    <table cellspacing=“0“>
        <tr>
            <td>哈哈哈哈哈</td>
            <td>哈哈哈哈哈</td>
            <td>哈哈哈哈哈</td>
        </tr>
        <tr>
            <td>哈哈哈哈哈</td>
            <td>哈哈哈哈哈</td>
            <td>哈哈哈哈哈</td>
        </tr>
        <tr>
            <td>哈哈哈哈哈</td>
            <td>哈哈哈哈哈</td>
            <td>哈哈哈哈哈</td>
        </tr>
    </table>
</body>

</html>