La propiedad border-collapse, el valor de la propiedad collapse puede hacer que los bordes se fusionen, el valor predeterminado es espaciado y los bordes están separados
No agregue contracción en la tabla, el valor predeterminado es espaciado:
Agregar borde-colapso: colapso; combinación de borde:
<!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>