Scrolling table with fixed header not working

Question

From this thread, I picked up the code here.

I have copied it, but it does not work for me. The table looks like the example, but when I scroll the header scrolls up as well. I guess I must have made a mistake somewhere but cannot see it, can someone help me please?

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

One of the first things I've noticed is `this.querySelector("thread")....` it should be "thead" not "thread". — Lohmar ASHAR, Feb 27 '18 at 21:36
I just tested it and can confirm that once you change `"thread"` to `"thead"` everything will work fine. — adprocas, Feb 27 '18 at 21:36

Lohmar ASHAR · Accepted Answer · 2018-02-27T23:01:21.780

You have 2 problems with the provided snippet(s):

there's a typo in your javascript code you have this.querySelector("thread"). ..., and it should be this.querySelector("thead"). ... *without the "r"
second, and most important, the position of the "script tag. Things in HTML are parsed/evaluated/executed in the order they are in the source code. At the time the processor hits the script tag and executes it, the searched elements are not yet present in the DOM. For this you should either:
- make that piece of code run after the whole document loaded. Ex.: inside jQuery(function(){ ... /* here */}) or adding handler to the body.
  or
- (simpler) move the whole script tag/block down in the source code, after all the elements you are searching (I'd say, at least, after before closing the table and closing the wrapper div).

score 0 · Answer 2 · answered Feb 27 '18 at 21:59

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

Yes He is right, Just move your script tag to the bottom and correct your querySelector to "thead" instead of "thread". — kishan, Feb 27 '18 at 22:00

Scrolling table with fixed header not working

2 Answers2