freeze first row

by jdhenckel

HTML

<div class="top">


<div class="head">
<table class="blue" border="1" rules="all">
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
</table>
</div>

<div class="lower">

<table border="1" rules="all">
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a test</td>
  </tr>
  <tr>
    <td>hello</td>
    <td>world</td>
    <td>this is a...

CSS

td {
  padding: 0 20px;
}

.blue {
  background: cyan;
}

.top {
}
.head {
  overflow-x: hidden;
  overflow-y: scroll;
  width: 500px;
}
.lower {
  overflow-x: auto;
  overflow-y: scroll;
  width: 500px;
  height: 400px;
}

table {
  width: 800px;
}

JavaScript

var head = document.querySelector('.head');

var lower = document.querySelector('.lower');

lower.addEventListener('scroll', function (e) {
	console.log(lower.scrollLeft);
  head.scrollLeft = lower.scrollLeft;
});