标题冻结后保持 Gridview 标题与列大小相同答案

【问题标题】：Keep Gridview Headers the same size as column after header freeze标题冻结后保持 Gridview 标题与列大小相同
【发布时间】：2012-10-23 02:17:00
【问题描述】：

所以我不得不冻结 gridview 的标题栏，我使用 asp:panel 和 CSS 来做到这一点。

<asp:Panel ID="panelContainer" runat="server" Height="100px" Width="100%"  ScrollBars="Vertical">

<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" Font-Size="small" CssClass="HeaderFreeze"  />

.HeaderFreeze
    {
    position:absolute;
    height: 40px;
    top: 80px;

    }

我现在唯一的问题是标题不再保持列的大小；有什么方法可以强制标题保持列的大小（可能会因其中的数据而改变）。

谢谢

【问题讨论】：

标签： asp.net css

【解决方案1】：

对于动态列宽，请使用 JavaScript。这是一个使用 jQuery 的解决方案：

example jsfiddle (fullscreen)

创建一个只有标题行的重复表格元素

<table id="panelContainerFixed">
    <tr class="header">
        <th>ID</th><th>Name</th>
    </tr>
</table>

<table id="panelContainer">
    <tr class="header">
        <th>ID</th><th>Name</th>
    </tr>
    <tr>
        <td>1</td><td>Name-1</td>
    </tr>
    <tr>
        <td>2</td><td>Name-2</td>
    </tr>
    <tr>
        <td>3</td><td>Name-3</td>
    </tr>
    ...
</table>

计算列的宽度并将这些宽度应用于重复的标题

// cache re-usable variables
var $window = $(window),
    $panelContainerFixed = $('#panelContainerFixed'),
    $panelContainer = $('#panelContainer'),
    $header = $('.header'),
    headerPos = $header.offset().top + $header.height();

// set column widths
$panelContainer.find('th').each(function() {
    var $that = $(this);
    $panelContainerFixed.find('th').eq($that.index()).width($that.width());
});

根据 scrollTop 显示/隐藏重复的标题

// on window scroll toggle the fixed headers
$window.scroll(function() {
    if ($window.scrollTop() > headerPos) {
        $panelContainerFixed.show();
    } else {
        $panelContainerFixed.hide();
    }
});

【讨论】：