Use the following code to create a fixed table header and scrollable tbody in HTML?
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
#list-table{
height:50px!important;
border:#000 0px solid;
display:block;
width:100%;
overflow-y:scroll;
}
#list-table td{
width:5%;
padding-left:5px;
height:15px;
border:#ccc 1px solid;
}
.margin-b{
margin-bottom:-1px;
background-color:#ccc;
border:#ccc 1px solid;
}
.col-1{
width:18.5%;
}
.col-2{
width:23.1%;
}
.col-3{
width:35%;
}
.col-4{
width:45%;
}
.ListTable {
margin-top: 170px;
}
</style>
</head>
<div id="user-detail-table"></div>
<div id="user-list-view" class="section-list">
<div id="newUser" >
</div>
<div class="ListTable hide">
<table class="table table-bordered margin-b">
<thead>
<td class="col-1"><b> Option</b> </td>
<td class="col-2"><b> Name </b></td>
<td class="col-3"><b> Email </b></td>
<td class="col-4"><b> Dept Name</b> </td>
</thead>
<table id="list-table" >
<tr>
<td><input type="radio" class="selectUser" name="userId" value="123"></td>
<td >Vezos</td>
<td >vezos@gmail.com</td>
<td >HR</td>
<tr>
<tr>
<td><input type="radio" class="selectUser" name="userId" value="123"></td>
<td >Vezos</td>
<td >vezos@gmail.com</td>
<td >HR</td>
<tr>
<tr>
<td><input type="radio" class="selectUser" name="userId" value="123"></td>
<td >Vezos</td>
<td >vezos@gmail.com</td>
<td >HR</td>
<tr>
<tr>
<td><input type="radio" class="selectUser" name="userId" value="123"></td>
<td >Vezos</td>
<td >vezos@gmail.com</td>
<td >HR</td>
<tr>
</table>
</table>
</div>
</div>
</html>