border-collapse的使用，属性值collapse可以使边框合并，默认值sparate边框分开

最新推荐文章于 2024-09-04 09:00:00 发布

一片海x

最新推荐文章于 2024-09-04 09:00:00 发布

阅读量1.6k

点赞数 1

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/xingxinglinxi/article/details/108610203

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

border-collapse属性，属性值collapse可以使边框合并，默认值sparate边框分开

在表格中不加collapse，默认值是sparate：

添加 border-collapse: collapse;边框合并：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户列表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        table {
            margin: 100px auto;
            width: 900px;
            text-align: center;
            border-collapse: collapse;
        }
        
        thead {
            background-color: rgb(151, 198, 252);
            color: #ccc;
        }
        
        tr {
            height: 30px;
            width: 600px;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>客户名称</th>
                <th>真实姓名</th>
                <th>电话</th>
                <th>邮箱</th>
                <th>客户等级</th>
                <th>客户来源</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>安徽省淮北市</td>
                <td>林芳</td>
                <td>18845678900</td>
                <td>1190887@163.com</td>
                <td>普通用户</td>
                <td>客服录入</td>
            </tr>
            <tr>
                <td>安徽省淮北市</td>
                <td>林芳</td>
                <td>18845678900</td>
                <td>1190887@163.com</td>
                <td>普通用户</td>
                <td>客服录入</td>
            </tr>


        </tbody>
    </table>
    <script>
        var tbody = document.querySelector("tbody");
        var trs = tbody.querySelectorAll("tr");
        for (var i = 0; i < trs.length; i++) {
            trs[i].addEventListener("mouseover", function() {
                for (var i = 0; i < trs.length; i++) {
                    trs[i].style.backgroundColor = "";
                }
                this.style.backgroundColor = "rgb(151, 198, 252)";
            });
            trs[i].addEventListener("mouseout", function() {
                this.style.backgroundColor = "";
            })
        }
    </script>
</body>

</html>