Question

我尝试了很多来冻结引导程序中表的标题但是找不到任何解决方案。我尝试从互联网上的代码示例，但我的表的设计搞砸了。我的代码如下：

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>

以上div的CSS

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

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

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

现在，最后使用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>');
});

我想冻结上表的标题。在将display:block;应用于<thead>和<tbody>时，整个设计都变得混乱了。我甚至尝试应用＆＃34; 粘贴标题＆＃34;，＆＃34; 冻结标题＆＃34;插件类型，但标题仍然没有得到修复。

请帮帮我。

感谢。

Answer 1

查看2014年解决的以下答案：Scrollable table with fixed header in bootstrap

如果它不符合您的需求，请告诉我。

如何在bootstrap中实现表的固定头

1 个答案: