我有一个表格,我试图在 this article 之后获取粘性标题.除了我的表格样式在顶部和底部有带边框的标题。
我不明白的部分是应用于 th
的顶部/底部边框与表格的其余部分一起滚动,而不是留在“卡住”的标题单元格中。有什么办法可以解决这个问题吗?
可在此处找到工作示例:https://codepen.io/smlombardi/pen/MNKqQY?editors=1100#0
let string = ''
console.log("oj")
for(let i=0; i<100; i++) {
string += `
<tr>
<td>Malcolm Reynolds</td>
<td>Captain</td>
<td>9035749867</td>
<td>mreynolds</td>
</tr>
`
}
document.getElementsByTagName('tbody')[0].innerHTML += string
.table-sticky-container {
height: 200px;
overflow-y: scroll;
border-top: 1px solid green;
border-bottom: 1px solid green;
}
.table-sticky {
th {
position: sticky;
top: 0;
z-index: 2;
border-top: 1px solid red !important;
border-bottom: 2px solid red !important;
}
}
<div class="table-sticky-container">
<table class="table table-sticky">
<thead class="thead-light">
<tr>
<th scope="col">Name</th>
<th scope="col">Title</th>
<th scope="col">ID</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Malcolm Reynolds</td>
<td>Captain</td>
<td>9035749867</td>
<td>mreynolds</td>
</tr>
</tbody>
</table>
</div>
最佳答案
可以添加
.table {
border-collapse: separate;
}
但不幸的是,它看起来很糟糕,更好的解决方案是使用伪元素添加变通方法。
th:after,
th:before {
content: '';
position: absolute;
left: 0;
width: 100%;
}
th:before {
top: -1px;
border-top: 1px solid red;
}
th:after {
bottom: -1px;
border-bottom: 2px solid red;
}
.table-sticky-container {
height: 200px;
overflow-y: scroll;
border-top: 1px solid green;
border-bottom: 1px solid green;
}
.table-sticky th {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
}
th:after,
th:before {
content: '';
position: absolute;
left: 0;
width: 100%;
}
th:before {
top: -1px;
border-top: 1px solid red;
}
th:after {
bottom: -1px;
border-bottom: 2px solid red;
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<div class="table-sticky-container">
<table class="table table-sticky">
<thead class="thead-light">
<tr>
<th scope="col">Name</th>
<th scope="col">Title</th>
<th scope="col">ID</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Malcolm Reynolds</td>
<td>Captain</td>
<td>9035749867</td>
<td>mreynolds</td>
</tr>
<tr>
<td>Zoe Washburne</td>
<td>First Officer</td>
<td>8908980980</td>
<td>zwashburne</td>
</tr>
<tr>
<td>Kaylee Frye</td>
<td>Engineer</td>
<td>6678687678</td>
<td>kfrye</td>
</tr>
<tr>
<td>Malcolm Reynolds</td>
<td>Captain</td>
<td>9035749867</td>
<td>mreynolds</td>
</tr>
<tr>
<td>Zoe Washburne</td>
<td>First Officer</td>
<td>8908980980</td>
<td>zwashburne</td>
</tr>
<tr>
<td>Kaylee Frye</td>
<td>Engineer</td>
<td>6678687678</td>
<td>kfrye</td>
</tr>
</tbody>
</table>
</div>
第二种方案
.table {
border-collapse: collapse;
}
.table-sticky thead th {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
box-shadow: inset 0 1px 0 red, inset 0 -2px 0 red;
}
关于html - 表头位置 :sticky and border issue,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57166162/