滚动 table 固定 header 不工作

Question

来自 this thread, I picked up the code here.

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

#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>

Answer 1

您提供的代码段有 2 个问题：

您的 javascript 代码中有错字 this.querySelector("thread"). ...，它应该是 this.querySelector("thead"). ... *没有 "r"
其次，也是最重要的，"script 标签的位置。HTML 中的内容按照它们在源代码中的顺序 parsed/evaluated/executed。当时处理器命中脚本标签并执行它，搜索到的元素尚未出现在 DOM 中。为此，您应该：
- 在整个文档加载后制作那段代码运行。例如：在 jQuery(function(){ ... /* here */}) 内或向主体添加处理程序。
  或
- （更简单）将整个脚本 tag/block 在源代码中向下移动，在您搜索的所有元素之后（我会说，至少，在关闭 table 和关闭之前包装器 div)。

Answer 2

<!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>

滚动 table 固定 header 不工作

Scrolling table with fixed header not working

html

javascript

scroll

html-table

tableheader