How to implement fixed header for table in bootstrap

Question

I tried a lot to freeze the header of a table in bootstrap but was not able to find any solution. I tried the code samples from the internet but the design of my table is getting messed up. My code follows below:

HTML

<div id="user_list" class="table-responsive">
   <asp:GridView ID="grdUsersList" runat="server" AutoGenerateColumns="false" CssClass="table table-hover" HeaderStyle-CssClass="info" BorderWidth="0px" GridLines="Horizontal" Width="100%">
   </asp:GridView>
</div>

CSS for above div

#user_list {
    overflow:auto;
    border: 1px solid #337AB7;
    max-height: 500px;
}

#user_list table {
    border-color: #337AB7;
}

#user_list table th {
    font-weight: bold;
}

Now, finally populating grid dynamically using jquery

$('#ChildContent_grdUsersList').append('<thead></thead>');
$('#ChildContent_grdUsersList thead').append('<tr><th class="info" style="width: 3%;"></th>\
        <th class="info" style="width: 12%;">Name</th>\
        <th class="info" style="width: 15%;">Login ID</th>\
        <th class="info" style="width: 15%;">Email ID</th>\
        <th class="info" style="width: 10%;">Phone No.</th>\
        <th class="info" style="width: 13%;">Designation</th>\
        <th class="info" style="width: 12%;">Reporting To</th>\
        <th class="info" style="width: 10%;">Business</th>\
        <th class="info" style="width: 10%;">User Type</th></tr>');

$.each(response, function (index, itemData) {
    $('#ChildContent_grdUsersList').append('<tr><td class="text-left"><input type="radio" id="radio_' + itemData.UserID + '" name="user" class="radio" value="' + itemData.UserID + '" onchange="showVal(this);"></input></td>\
        <td class="text-left">' + itemData.UserName + '</td>\
        <td class="text-left">' + itemData.LoginId + '</td>\
        <td class="text-left">' + itemData.EmailId + '</td>\
        <td class="text-left">' + itemData.Phone + '</td>\
        <td class="text-left">' + itemData.Designation + '</td>\
        <td class="text-left">' + itemData.ReportingTo + '</td>\
        <td class="text-left">' + itemData.BusinessAssigned + '</td>\
        <td class="text-left">' + itemData.UserType + '</td></tr>');
});

I want to freeze the header of the above table. On applying display:block; to <thead> and <tbody>, the whole design is getting messed up. I even tried applying "sticky headers", "freeze headers" kind of plugins but still the headers are not getting fixed.

Please help me.

Thanks.

I do not want to use jquery UI and I think tableScroll is part of jquery UI — Agnib, Oct 01 '15 at 09:38
Its not depending on jquery UI. have a look at this [link](http://table-scroll.site90.com/) — Muhammed Shevil KP, Oct 01 '15 at 09:59
But, in that link I saw that data is not moving up and down while scrolling. When I am leaving mouse click then the data is appearing. But, this should not happen, isn't it? while scrolling, data should move up and down. — Agnib, Oct 01 '15 at 11:11

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

Check out the following answer wich was solved on 2014: Scrollable table with fixed header in bootstrap

If it does not fit your needs, let me know.

edited May 23 '17 at 12:06

Community

1
1

answered Oct 01 '15 at 09:23

Xavi Alsina

643
1
8
24

I tried this before but as I said that on applying "display : block" in thead and tbody section, the whole design is getting messed up. Can you tell me how to post image then I can post some screenshots which might help you to understand better that what exactly is happening on applying the css in thead and tbody – Agnib Oct 01 '15 at 09:37
I cannot understand why the width is getting messed up as I set tbody and thead as block – Agnib Oct 01 '15 at 11:31

How to implement fixed header for table in bootstrap

1 Answers1