Showing posts with label static table header fix top row at scroll of body rows. Show all posts
Showing posts with label static table header fix top row at scroll of body rows. Show all posts

Monday, 23 December 2019

Bootstrap make table header columns as fixed(Fix top tow as fixed while scrolling the body rows in Table)

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;
}