Question

我正在使用网格制作管理应用，用户可以在其中查看我从数据库中提取的表格并使用WebGrid进行显示。

现在我正在尝试在webGrid中使用sticky header。我发现的jQuery方法都涉及将CSS中的标题“position”设置为“fixed”。但是，每次执行此操作时，标题中的所有列都会相互重叠，就像每列都移动到第一列的顶部一样。

这是我将要使用的jquery函数的脚本：

<SCRIPT>
$(document).ready(function() {

    var div = $('#th');
    var start = $(div).offset().top;

    $.event.add(window, "scroll", function() {
        var p = $(window).scrollTop();
        $(div).css('position',((p)>start) ? 'fixed' : 'static');
        $(div).css('top',((p)>start) ? '0px' : '');
    });

});
</SCRIPT>

这里是网格的CSS，虽然我没有做太多的事情：

<style>
    table
    {
        text-align: center;        
    }

    th
    {
        background-color: lightgreen;
    }
</style>

首先，我使用正确方法完成此任务的方法是什么？另外，如何解决标题问题？

Answer 1

我已经放弃了这种方法。我只是接受我必须有两个表 - 一个用于标题，一个用于内容。在两个网格的PreRender事件中，我将列设置为百分比宽度，它们排列完美。

WebCrid在MVC中的粘滞标头

1 个答案: