我正在尝试为用户滚动创建表格的标头。我写了它并且它起作用了，但是看起来表格元素的宽度不能按预期工作。
https://jsfiddle.net/fj8rtq0g/5/
我的JS代码在这里：
window.onload = function() {
elementsHead = document.querySelectorAll("#result_list thead tr th");
elementsHead[0].width = document.querySelector("#result_list tbody tr:first-child th").offsetWidth;
elementsFirstRowBody = document.querySelectorAll("#result_list tbody tr:first-child td");
for (i = 0; i < elementsHead.length; i++) {
if (i >= 1) {
elementsHead[i].width = elementsFirstRowBody[i-1].offsetWidth;
}
}
}
window.onscroll = function() {
addSticky();
};
function addSticky() {
var navbar = document.getElementById("result_list");
var sticky = navbar.getBoundingClientRect().top;
if (sticky < 0) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
我的CSS代码在这里：
.sticky thead tr {
position: fixed;
top: 0;
width: 100%;
z-index: 100;
background: red;
}
有人可以建议如何解决此问题吗？我使用的是纯JavaScript。
答案 0 :(得分：1)
将“ tr”设置为顶部：0和左侧：0宽度：100％，并添加20px间距的填充。
.sticky thead tr {
position: fixed;
top: 0;
left: 0;
padding: 20px;
width: 100%;
z-index: 100;
background: red;
}
这可以解决问题。
答案 1 :(得分：1)
这是我使用固定位置的解决方案
我对th的所有thead应用了position：sticky
我还删除了负责确定列大小的javascript代码，但保留了为tr添加颜色的功能
window.onload = function() {
/* elementsHead = document.querySelectorAll("#result_list thead tr th");
elementsHead[0].width = document.querySelector("#result_list tbody tr:first-child th").offsetWidth;
elementsFirstRowBody = document.querySelectorAll("#result_list tbody tr:first-child td");
for (i = 0; i < elementsHead.length; i++) {
if (i >= 1) {
elementsHead[i].width = elementsFirstRowBody[i-1].offsetWidth;
}
}
*/
}
window.onscroll = function() {
addSticky();
};
function addSticky() {
var navbar = document.getElementById("result_list");
var sticky = navbar.getBoundingClientRect().top;
if (sticky < 0) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}.sticky thead tr th {
position: sticky;
top: 0;
background: red;
}<table id="result_list">
<thead>
<tr>
<th>
Title
</th>
<th>
Title 1
</th>
<th>
Title 2
</th>
<th>
Title 3
</th>
<th>
Title 4
</th>
<th>
Title 5
</th>
<th>
Title 6
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
<tr>
<th>
Demo
</th>
<td>
Demo 1
</td>
<td>
Demo 2
</td>
<td>
Demo 3
</td>
<td>
Demo 4
</td>
<td>
Demo 5
</td>
<td>
Demo 6
</td>
</tr>
</tbody>
</table>