js Scrolling Table with Borders

by Vignesh Vijayaraju

HTML

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

CSS

/* your existing container */
#wrap {
    float: left;
    overflow: auto;
    height: 300px;
    border: 1px solid black;
}

JavaScript

document.getElementById("wrap").addEventListener("scroll",function(){
   var translate = "translate(0,"+this.scrollTop+"px)";
   this.querySelector("thead").style.transform = translate;
});