时间戳

首页 > 解决方案 > MVCGrid.net 表固定标题

c# - MVCGrid.net 表固定标题

问题描述

是否有可能在MVCGrid表中使用固定标题？我尝试了许多解决方案，但没有一个效果很好。当表格中有很多列时，用户将这些数据滚动到左侧 - 标题超出了框架。我正在使用StickyTableHeaders jQuery插件，表结构类似于scrollable-div.html演示文件夹中的表结构。我有一个 div 包含另一个带表格的 div，没有样式，但是overflow:autoand height:600px;

[问题]

编辑：

编辑2：

“调试”后

标签： c#jqueryhtmlcsstwitter-bootstrap

解决方案

您必须显示 2 个相同的表格。它们都属于带有“position:relative;overflow:auto;”的同一个父容器 风格。

一个表有内容，另一个表有以下样式：

position:absolute;
top:0; left:0;
height:32px; //this is your row height
overflow:hidden;

接下来将 onscroll 事件捕获到父容器。将 scrollLeft 值同步到固定头表的 left 值。

document.getElementById('container').onscroll=function(){
  var header=document.getElementById('header_table');
  var parent=document.getElementById('container');

  header.style.left=-1*parent.scrollLeft+'px';

}

最后，（这是一个重要的步骤），将父容器放入另一个具有“溢出：隐藏”的容器中。这将剪掉您的标题表，使其保持在“内部”。

编辑：试试这个片段，看看悬停的标题是否至少被剪掉了。您的屏幕截图显示剪辑不起作用。

<div style="padding:50px;">

<div style="overflow:hidden;">
  <div style="position:relative;">
    AA<br>BB
    <div style="position:absolute;top:0;left:-5px;">
    XXXX
    </div>
  </div>
</div>

</div>

您可以看到 XXXX 与 AA 重叠但向左移动。XXXX 被主容器剪掉。

推荐阅读