Microsoft和Brave中的表头不粘性
Microsoft和Brave中的表头不粘性
提问于 2021-06-23 07:33:54
我试图使表格标题粘在卷轴上。我的解决方案在Chrome和Firefox中运行良好，但在Edge和Brave浏览器中却不起作用。
我尝试过其他一些事情，比如使表头是绝对的，但是它扰乱了表的结构。我不知道如何使这个跨浏览器兼容。
下面是代码的jsfiddle链接。https://jsfiddle.net/zp1Lk6mw/
这是密码
<div class="table-wrapper table-1">
<div id="table-1-container" class="table-container">
<table class="table">
<thead id="table-1-head">
<tr class="table-header">
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
<th>Column 13</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr> <tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
<tr>
<td>
<div>Sheet1</div>
</td>
<td><div>22359555555555555555555555555555555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>223595555</div></td>
<td><div>1871265.91</div></td>
<td><div>1871265.91</div></td>
</tr>
</tbody>
</table>
</div>
</div>CSS
:root {
--orange: #f47a14;
--blue-header: #003f5b;
--dark-grey: #999999;
--light-grey: #f8f8fc;
--text-color: #333333;
}
.table-wrapper {
margin-top: 30px;
font-family: "Inter", sans-serif;
font-weight: 500;
}
.table-container {
overflow-y: scroll;
max-height: 610px;
position: relative;
scrollbar-width: thin;
}
.table-container::-webkit-scrollbar {
width: 2px;
}
.table-container::-webkit-scrollbar-thumb {
border-radius: 4px;
box-shadow: inset 0 0 6px var(--dark-grey);
}
.table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
box-sizing: border-box;
}
table.table thead {
text-align: left;
width: 100%;
box-shadow: inset 0 -1px 0 var(--dark-grey);
position: sticky;
position: -webkit-sticky;
height: 30px;
padding: 10px 0;
top: -5px;
background-color: #fff;
}
table.table tbody {
overflow-y: scroll;
height: 610px;
border-width: 0;
border-collapse: collapse;
}
.table tr {
height: 30px;
}
.table tr th:nth-child(1) {
width: 14.284% !important;
}
.table th {
font-size: 12px;
text-align: left;
color: var(--blue-header);
padding-right: 15px;
}
.table tr td:nth-child(1) {
width: 14.284% !important;
max-width: 14.284% !important;
}
.table td {
font-size: 11px;
color: var(--text-color);
padding-right: 15px;
}
td div {
white-space: nowrap;
overflow-x: scroll;
scrollbar-width: none;
scrollbar-color: transparent;
}
.table tr.table-header {
border-collapse: separate;
border-spacing: 6px;
padding-bottom: 6px;
width: 100%;
}
.table tr:not(.table-header):nth-child(even) {
background-color: var(--light-grey);
}
.table tr td div::-webkit-scrollbar {
height: 0px;
}
.table tr td div::-webkit-scrollbar-thumb {
border-top: 1px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: 9999px;
background-color: var(--dark-grey);
}回答 1
Stack Overflow用户
发布于 2021-06-24 08:51:00
粘性要求position: relative不适用于thead或tr，但它适用于th，因此您可以这样做：
table th{
position: sticky;
top: 0;
}这将使表头粘稠。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68095476
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号