You have to remove the css from the style of the table and use it separately to create the overflow effect and should contain table display: block
<style>
table tbody, table thead
{
display: block;
}
table tbody
{
overflow: auto;
height: 100px;
}
</style>
<div style="height: 250px;">
<table border="1">
<thead>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</thead>
<tbody>
<tr>
<td>body 1</td>
<td>body 2</td>
<td>body 3</td>
<td>body 4</td>
</tr>
<tr>
<td>body 1</td>
<td>body 2</td>
<td>body 3</td>
<td>body 4</td>
</tr>
<tr>
<td>body 1</td>
<td>body 2</td>
<td>body 3</td>
<td>body 4</td>
</tr>
<tr>
<td>body 1</td>
<td>body 2</td>
<td>body 3</td>
<td>body 4</td>
</tr>
</tbody>
</table>
</div>
In the example that you show is a plugin you will have to use the data of the provided plugin
Example
/*CSS*/
<style>
.thumbs-block {
position:relative;
overflow: hidden;
background: #ccc;
margin: 0 5px;
width: 714px;
height:142px; /**/
}
.thumbs-block .thumbs {
white-space: nowrap;
text-align: center;
}
.thumbs-block .thumb {
display: inline-block;
padding: 5px;
margin: 5px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.3);
height: 120px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.thumbs{
position:absolute; /**/
margin-left:0; /**/
}
</style>
/*HTML*/
<!DOCTYPE html>
<html>
<head>
/*Injeta o script do jquery*/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><metacharset=utf-8/><title>JSBin</title></head><body>Thisonewillhave60px"mousemove padding" at each side:
<div class="thumbs-block">
<div class="thumbs">
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=1"width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=2"width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=3"width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=4"width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=5"width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=6"width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=7"width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=8"width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=9"width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=10"width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=11"width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=12"width="120" height="120" /></a>
</div>
</div>
</body>
</html>
/*Jquery*/
<script>
$(function(){
var $bl = $(".thumbs-block"),
$th = $(".thumbs"),
blW = $bl.outerWidth(),
blSW = $bl[0].scrollWidth,
wDiff = (blSW/blW)-1, // widths difference ratio
mPadd = 60, // Mousemove Padding
damp = 20, // Mousemove response softness
mX = 0, // Real mouse position
mX2 = 0, // Modified mouse position
posX = 0,
mmAA = blW-(mPadd*2), // The mousemove available area
mmAAr = (blW/mmAA); // get available mousemove fidderence ratio
$bl.mousemove(function(e) {
mX = e.pageX - this.offsetLeft;
mX2 = Math.min( Math.max(0, mX-mPadd), mmAA ) * mmAAr;
});
setInterval(function(){
posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"
$th.css({marginLeft: -posX*wDiff });
}, 10);
});
</script>
