<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class='table-cont' id='table-cont'>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">10</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">11</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">12</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">13</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
// Code goes here
'use strict'
window.onload = function(){
var tableCont = document.querySelector('#table-cont')
/**
* scroll handle
* @param {event} e -- scroll event
*/
function scrollHandle (e){
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle)
}
/* Styles go here */
.table-cont{
/**make table can scroll**/
max-height: 200px;
overflow: auto;
/** add some style**/
/*padding: 2px;*/
background: #ddd;
margin: 20px 10px;
box-shadow: 0 0 1px 3px #ddd;
}
thead{
background-color: #ddd;
}