如何在引导程序中实现表的固定标题答案

【问题标题】：How to implement fixed header for table in bootstrap如何在引导程序中实现表的固定标题
【发布时间】：2015-10-01 09:11:45
【问题描述】：

我尝试了很多方法来冻结引导程序中的表头，但找不到任何解决方案。我尝试了来自互联网的代码示例，但我的桌子设计变得一团糟。我的代码如下：

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> 时，整个设计变得一团糟。我什至尝试应用“sticky headers”、“freeze headers”之类的插件，但标题仍然没有得到修复。

请帮帮我。

谢谢。

【问题讨论】：

试试tableScroll插件
我不想使用 jquery UI，我认为 tableScroll 是 jquery UI 的一部分
它不依赖于 jquery UI。看看这个link
但是，在那个链接中，我看到数据在滚动时没有上下移动。当我离开鼠标点击时，数据就会出现。但是，这不应该发生，不是吗？滚动时，数据应该上下移动。

标签： jquery html css asp.net twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

我之前试过这个，但正如我所说，在 thead 和 tbody 部分应用“display : block”时，整个设计变得一团糟。您能告诉我如何发布图片，然后我可以发布一些屏幕截图，这可能会帮助您更好地了解在 thead 和 tbody 中应用 css 时到底发生了什么
当我将 tbody 和 thead 设置为块时，我无法理解为什么宽度会变得混乱