来自this thread ,我拿起code here .
我已经复制了它,但它对我不起作用。该表看起来像示例,但是当我滚动时,标题也会向上滚动。我想我一定在某个地方犯了错误,但看不到它,有人可以帮助我吗?
#wrap {
float: left;
overflow: auto;
height: 300px;
border: 1px solid black;
}
table {
border-spacing: 0;
}
table>*>tr>* {
border-bottom: 1px solid black;
border-right: 1px solid black;
}
table>tbody> :last-child>* {
border-bottom: none;
}
th {
background-color: lightskyblue;
}
<script>
document.getElementById("wrap").addEventListener("scroll", function() {
var translate = "translate(0," + this.scrollTop + "px)";
this.querySelector("thread").style.transform = translate;
});
</script>
<div id="wrap">
<table>
<thead>
<tr>
<th colspan="2">
Colspanned Cell
</th>
</tr>
<tr>
<th>Foo bar baz qux quux lorem ipsum dolor sit amet consectetur adipisicing</th>
<th>Foo Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is a test</td>
<td>This is a test</td>
</tr>
<tr>
<td rowspan="3">Rowspanned cell</td>
<td>Lorem ipsum dolor</td>
</tr>
<tr>
<td>sit amet consectetur</td>
</tr>
<tr>
<td>adipisicing</td>
</tr>
<tr>
<td>testing 1 2 3</td>
<td>testing 1 2 3</td>
</tr>
<tr>
<td>a b c</td>
<td>d e f</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>testing 1 2 3 4</td>
<td>testing 1 2 3 4 5 6 7 8 9 0</td>
</tr>
<tr>
<td>The quick brown fox jumps over the lazy dog</td>
<td>HELLO WORLD!!!!</td>
</tr>
<tr>
<td>Foo bar</td>
<td>baz qux</td>
</tr>
<tr>
<td>quux</td>
<td>foo<br/>bar<br/>baz<br/>qux<br/>quux</td>
</tr>
<tr>
<td>THE</td>
<td>END</td>
</tr>
</tbody>
</table>
</div>
最佳答案
您对所提供的代码片段有 2 个问题:
- 您的 JavaScript 代码中有一个拼写错误
this.querySelector("thread")。 ...
,它应该是this.querySelector("thead")。 ...
*没有“r” 第二个,也是最重要的,“script 标签的位置。HTML 中的内容按照它们在源代码中的顺序进行解析/评估/执行。当处理器命中 script 标签并执行时它表示搜索到的元素尚未出现在 DOM 中。为此,您应该:
- 使该代码段在整个文档加载后运行。例如:在
jQuery(function(){ .../* 这里 */})
内或向主体添加处理程序。
或 - (更简单)将整个脚本标记/ block 在源代码中向下移动,位于您正在搜索的所有元素之后(我想说,至少是在关闭表格并关闭包装器 div 之前之后)。
- 使该代码段在整个文档加载后运行。例如:在
关于javascript - 具有固定标题的滚动表不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49018285/