js Scrolling Table

HTML

<div id="wrap">
    <table>
        <thead>
            <tr>
                <th>Foo</th>
                <th>Bar</th>
            </tr>
        </thead>
        <tbody>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
        </tbody>
    </table>
</div>

CSS

/* your existing container */
#wrap {
    overflow: auto;
    height: 400px;
}

/* css for demo */
td {
    background-color: green;
    width: 200px;
    height: 100px;
}

th { background-color:#fff; }

JavaScript

document.getElementById("wrap").addEventListener("scroll",function(){
   var translate = "translate(0,"+(this.scrollTop-3)+"px)";
   if(/MSIE 9/.test(navigator.userAgent))
      this.querySelector("thead").style.msTransform = translate;
   else
      this.querySelector("thead").style.transform = translate;
});