我试图保持thead在粘性位置。它可以工作，但边框仍然在滚动上，没有处于粘着状态。如何解决这个问题?
下面是我的代码:
table{
border-collapse: collapse;
border:1px solid gray;
width: 100%;
}
th{
text-align: left;
border-bottom: 1px solid black;
}
.container{
overflow-y: auto;
height: 200px;;
background-color: yellow;
}
thead {
position: sticky;
top: 0;
background-color: yellow;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body>
<div class="container">
<table>
<thead>
<tr>
<th>Column 1 </th>
<th>Column 2 </th>
<th>Column 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>现场演示
可以使用::before和::after选择器来添加边框
table {
border-collapse: collapse;
border: 1px solid gray;
border-top: none;
width: 100%;
}
th {
text-align: left;
border-bottom: 1px solid black;
}
.container {
overflow-y: auto;
height: 200px;
background-color: yellow;
}
thead {
position: sticky;
top: 0;
background-color: yellow;
}
thead::after,
thead::before {
content: '';
position: absolute;
left: 0;
width: 100%;
}
thead::before {
top: 0;
border-top: 1px solid gray;
margin-top: -0.5px;
}
thead::after {
bottom: 0;
border-bottom: 1px solid gray;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body>
<div class="container">
<table>
<thead>
<tr>
<th>Column 1 </th>
<th>Column 2 </th>
<th>Column 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>在thead元素中，您可以使用box-shadow属性和border-bottom作为透明属性。
查看下面的代码片段，希望对你有帮助。
table{
border-collapse: collapse;
border:1px solid gray;
width: 100%;
}
th{
text-align: left;
}
.container{
overflow-y: auto;
height: 200px;;
background-color: yellow;
}
thead {
position: sticky;
top: 0;
background-color: yellow;
border-bottom: transparent;
box-shadow: 0 0px 0.5px 1px gray;
}<div class="container">
<table>
<thead>
<tr>
<th>Column 1 </th>
<th>Column 2 </th>
<th>Column 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
</div>在表的CSS中使用border-collapse: separate;代替border-collapse: collapse;