0

このスレッドから、ここにコードをピックアップしました。

コピーしましたが、うまくいきません。表は例のように見えますが、スクロールするとヘッダーも上にスクロールします。私はどこかで間違いを犯したに違いないと思いますが、それを見ることができません。誰か助けてもらえますか?

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

4

2 に答える 2