The use of border-collapse, the attribute value collapse can make the borders merge, the default value is sparate and the borders are separated

The border-collapse property, the property value collapse can make the borders merge, the default value is sparate and the borders are separated

Do not add collapse in the table, the default value is sparate:

Add border-collapse: collapse; border merge:

<!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>[email protected]</td>
                <td>普通用户</td>
                <td>客服录入</td>
            </tr>
            <tr>
                <td>安徽省淮北市</td>
                <td>林芳</td>
                <td>18845678900</td>
                <td>[email protected]</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>

The use of border-collapse, the attribute value collapse can make the borders merge, the default value is sparate and the borders are separated

Guess you like