带有固定标题的滚动表不起作用

从这个线程中，我在这里拿起了代码。

我已经复制了它，但它对我不起作用。该表看起来像示例，但是当我滚动标题时，标题也会向上滚动。我想我一定是在某处犯了错误但看不到它，有人可以帮我吗？

#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">
其次，也是最重要的，"脚本标签"的位置。HTML 中的内容按照它们在源代码中的顺序进行解析/评估/执行。在处理器命中脚本标记并执行它时，搜索的元素尚不存在在 DOM 中。为此，您应该：
- 使该段代码在整个文档加载后运行。例如：在jQuery(function(){ ... /* here */})内部或向正文添加处理程序。
  或
- 更简单)在源代码中向下移动整个脚本标签/块，在您正在搜索的所有元素之后(我会说，至少，在关闭表并关闭包装器div 之前)。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scroll Test03</title>
<style>
#wrap {
float: left;
overflow: auto;
height: 300px;
border: 1px solid black;
}
/* css for demo */
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;
}
</style>
</head>
<body>
<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>
<script type="text/javascript" >
document.getElementById("wrap").addEventListener("scroll",function(){
var translate = "translate(0,"+this.scrollTop+"px)";
this.querySelector("thead").style.transform = translate;
});
</script>
</body>
</html>

相关内容

最新更新

热门标签：