asp.net - 在标题卡住后保持 Gridview 标题与列的大小相同

Question

所以我不得不卡住 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;

    }

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

谢谢

Answer 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显示/隐藏重复的header

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