Question

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

#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”
第二，也是最重要的，“脚本标记的位置.HTML中的内容按照它们在源代码中的顺序进行解析/评估/执行。当处理器点击脚本标记并执行时它，搜索到的元素尚未出现在DOM中。为此你应该：
- 在加载整个文档后运行该段代码。例如：在jQuery(function(){ ... /* here */})内或向身体添加处理程序或
- （更简单）在您搜索的所有元素之后在源代码中移动整个脚本标记/块（至少在关闭表并关闭包装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>

滚动表，固定标头不起作用

2 个答案: