Step 1: Apply bootstrap classes to your html table as folowing:
<div class="table-responsive">
<table id="tblClients" class="table table-bordered table-hover">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th></th>
</tr>
</thead>
<tbody>
<td>Anil</td>
<td>test@gmail.com</td>
<td>123451235</td>
<td>Edit</td>
</tbody>
</table>
</div>
Step 2: Add the following css into your style tag or css file:
.table-responsive {
overflow-y: auto;
height: 200px;
}
.table-responsive thead th {
position: sticky;
top: 0;
background-color: #ccc;
}
<div class="table-responsive">
<table id="tblClients" class="table table-bordered table-hover">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th></th>
</tr>
</thead>
<tbody>
<td>Anil</td>
<td>test@gmail.com</td>
<td>123451235</td>
<td>Edit</td>
</tbody>
</table>
</div>
Step 2: Add the following css into your style tag or css file:
.table-responsive {
overflow-y: auto;
height: 200px;
}
.table-responsive thead th {
position: sticky;
top: 0;
background-color: #ccc;
}
No comments:
Post a Comment