Adding a fixed width to td,th after making tbody & thead display block works perfectly and also we can use slimscroll plugin to make the scroll bar beautiful.
<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
<title> Scrollable table </title>_x000D_
<style>_x000D_
body {_x000D_
font-family: sans-serif;_x000D_
font-size: 0.9em;_x000D_
}_x000D_
table {_x000D_
border-collapse: collapse;_x000D_
border-bottom: 1px solid #ddd;_x000D_
}_x000D_
thead {_x000D_
background-color: #333;_x000D_
color: #fff;_x000D_
}_x000D_
thead,tbody {_x000D_
display: block;_x000D_
}_x000D_
th,td {_x000D_
padding: 8px 10px;_x000D_
border: 1px solid #ddd;_x000D_
width: 117px;_x000D_
box-sizing: border-box;_x000D_
}_x000D_
tbody {_x000D_
height: 160px;_x000D_
overflow-y: scroll_x000D_
}_x000D_
</style>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
<table class="example-table">_x000D_
<thead>_x000D_
<tr>_x000D_
<th> Header 1 </th>_x000D_
<th> Header 2 </th>_x000D_
<th> Header 3 </th>_x000D_
<th> Header 4 </th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody>_x000D_
<tr>_x000D_
<td> Row 1- Col 1 </td>_x000D_
<td> Row 1- Col 2 </td>_x000D_
<td> Row 1- Col 3 </td>_x000D_
<td> Row 1- Col 4 </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td> Row 2- Col 1 </td>_x000D_
<td> Row 2- Col 2 </td>_x000D_
<td> Row 2- Col 3 </td>_x000D_
<td> Row 2- Col 4 </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td> Row 3- Col 1 </td>_x000D_
<td> Row 3- Col 2 </td>_x000D_
<td> Row 3- Col 3 </td>_x000D_
<td> Row 3- Col 4 </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td> Row 4- Col 1 </td>_x000D_
<td> Row 4- Col 2 </td>_x000D_
<td> Row 4- Col 3 </td>_x000D_
<td> Row 4- Col 4 </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td> Row 5- Col 1 </td>_x000D_
<td> Row 5- Col 2 </td>_x000D_
<td> Row 5- Col 3 </td>_x000D_
<td> Row 5- Col 4 </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td> Row 6- Col 1 </td>_x000D_
<td> Row 6- Col 2 </td>_x000D_
<td> Row 6- Col 3 </td>_x000D_
<td> Row 6- Col 4 </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td> Row 7- Col 1 </td>_x000D_
<td> Row 7- Col 2 </td>_x000D_
<td> Row 7- Col 3 </td>_x000D_
<td> Row 7- Col 4 </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td> Row 8- Col 1 </td>_x000D_
<td> Row 8- Col 2 </td>_x000D_
<td> Row 8- Col 3 </td>_x000D_
<td> Row 8- Col 4 </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td> Row 9- Col 1 </td>_x000D_
<td> Row 9- Col 2 </td>_x000D_
<td> Row 9- Col 3 </td>_x000D_
<td> Row 9- Col 4 </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td> Row 10- Col 1 </td>_x000D_
<td> Row 10- Col 2 </td>_x000D_
<td> Row 10- Col 3 </td>_x000D_
<td> Row 10- Col 4 </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td> Row 11- Col 1 </td>_x000D_
<td> Row 11- Col 2 </td>_x000D_
<td> Row 11- Col 3 </td>_x000D_
<td> Row 11- Col 4 </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td> Row 12- Col 1 </td>_x000D_
<td> Row 12- Col 2 </td>_x000D_
<td> Row 12- Col 3 </td>_x000D_
<td> Row 12- Col 4 </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td> Row 13- Col 1 </td>_x000D_
<td> Row 13- Col 2 </td>_x000D_
<td> Row 13- Col 3 </td>_x000D_
<td> Row 13- Col 4 </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td> Row 14- Col 1 </td>_x000D_
<td> Row 14- Col 2 </td>_x000D_
<td> Row 14- Col 3 </td>_x000D_
<td> Row 14- Col 4 </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td> Row 15- Col 1 </td>_x000D_
<td> Row 15- Col 2 </td>_x000D_
<td> Row 15- Col 3 </td>_x000D_
<td> Row 15- Col 4 </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td> Row 16- Col 1 </td>_x000D_
<td> Row 16- Col 2 </td>_x000D_
<td> Row 16- Col 3 </td>_x000D_
<td> Row 16- Col 4 </td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>_x000D_
_x000D_
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>_x000D_
<script>_x000D_
$('.example-table tbody').slimscroll({_x000D_
height: '160px',_x000D_
alwaysVisible: true,_x000D_
color: '#333'_x000D_
})_x000D_
</script>_x000D_
</body>_x000D_
_x000D_
</html>
_x000D_