MVCGrid.net表固定标题

Question

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

[问题]

编辑

edit2：

＆＃34;调试＆＃34;

Answer 1

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

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

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

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

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

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

}

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

编辑：尝试使用此代码段查看悬停标题是否至少被剪掉。您的屏幕截图显示裁剪无效。

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