滚动时固定GridView表头，窗口缩放后列对齐问题求助

问题说明 #

我有一个包含大量记录的GridView，滚动时表头无法固定在顶部。通过JS克隆原GridView表头创建了GHead，滚动到指定位置显示，但窗口缩放时GHead宽度变化，和原GridView列无法对齐，需要实现窗口缩放时GHead宽度与原表头保持一致。

原代码 #

JS代码

<script language="javascript" >
      $(document).ready(function () {
      var gridHeader = $('#<%=GridView1.ClientID%>').clone(true); // 克隆带样式的GridView副本
      $(gridHeader).find("tr:gt(0)").remove(); // 移除除首行（表头行）外的所有行
      $('#<%=GridView1.ClientID%> tr th').each(function (i) {
          // 将GridView各th的宽度设置给克隆表的对应th
          $("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width() + 5).toString() + "px");
      });
      $("#GHead").append(gridHeader);

      $('#container').css('position', 'relative');
      $('#GHead').css('position', 'fixed');
      $('#GHead').css('width', $('#<%=GridView1.ClientID%>').width());
      $('#GHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);
      //$('#GHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);

  });

  // 滚动时JS表头在屏幕顶部显示
  $(document).scroll(function () {
      var y = $(this).scrollTop();
      if (y > 700) {
          $('#GHead').fadeIn();
      } else {
          $('#GHead').fadeOut();

      }
  });
</script>

HTML代码

<div id="container" style="width:auto">
    <div id="GHead" style="z-index:2000; "></div> 

         <asp:GridView ID="GridView1" ....>
              ....
         </asp:GridView>
     </div>

解决方案 #

核心思路是监听窗口缩放事件，同步更新固定表头的尺寸和位置，同时强制表头列宽固定：

• 提取初始化逻辑为独立函数，初始化和窗口缩放时重复调用
• 给克隆表头添加table-layout: fixed样式，避免列宽自动调整
• 同步固定表头的水平偏移量，确保与原GridView位置对齐

修改后完整代码 #

JS代码

<script language="javascript" >
    $(document).ready(function () {
        // 初始化固定表头
        initFixedHeader();
        // 监听窗口缩放事件，重新同步表头
        $(window).resize(function() {
            initFixedHeader();
        });
    });

    function initFixedHeader() {
        var $grid = $('#<%=GridView1.ClientID%>');
        var $gHead = $('#GHead');
        
        // 清空原有表头，重新克隆生成
        $gHead.empty();
        var gridHeader = $grid.clone(true);
        $(gridHeader).find("tr:gt(0)").remove();
        
        // 设置表格布局为固定，强制使用指定列宽
        $(gridHeader).css('table-layout', 'fixed');
        
        // 同步每列宽度
        $grid.find('tr th').each(function (i) {
            var colWidth = $(this).width();
            $("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', (colWidth + 5) + "px");
        });
        
        $gHead.append(gridHeader);
        
        // 设置GHead的定位和尺寸
        $('#container').css('position', 'relative');
        $gHead.css({
            'position': 'fixed',
            'width': $grid.width() + 'px',
            'top': '0',
            'left': $grid.offset().left + 'px',
            'display': $(document).scrollTop() > 700 ? 'block' : 'none'
        });
    }

    // 滚动控制表头显示隐藏
    $(document).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 700) {
            $('#GHead').fadeIn();
        } else {
            $('#GHead').fadeOut();
        }
    });
</script>

HTML代码

<div id="container" style="width:auto">
    <div id="GHead" style="z-index:2000; display:none;"></div> 
    <asp:GridView ID="GridView1" ....>
        ....
    </asp:GridView>
</div>

关键说明 #

1. initFixedHeader函数复用初始化逻辑，确保窗口缩放时重新同步表头尺寸
2. table-layout: fixed强制表格使用设置的列宽，不会随窗口缩放自动调整
3. 设置left属性同步原GridView的水平偏移，避免固定表头与原表格水平错位

内容的提问来源于stack exchange，提问作者Dan