MVCGrid.net表固定标头

Question

是否有可能在MVCGrid表中使用固定的标头？我尝试了许多解决方案，但它们中的任何一个都不起作用。当表中有许多列时，用户将这些数据滚动到左侧--标题超出了框架。我使用的是StickyTableHeaders jQuery插件，表结构类似于演示文件夹中的scrollable-div.html。我有一个div包含另一个带表的div，没有样式，只有overflow:auto和height:600px；

问题

​

​

编辑：

​

​

edit2:

“调试”之后

​

​

Answer 1

你必须显示两个相同的桌子。它们都属于一个父容器，该容器带有“位置:相对；溢出:auto；”样式。

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

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

接下来，将on涡旋事件捕获到父容器。将scrollLeft值同步到固定标头表的左值。

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被主容器裁剪掉。