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

No comments:

Post a Comment