如何为NonFactors.Grid.Mvc6网格实现固定表头功能？

核心配置（组件内置功能） #

这个组件的固定表头确实是内置功能，关键要通过后端网格配置开启，而非单纯依赖前端CSS调整：

• 创建Grid实例时，设置IsScrollable = true，同时指定ScrollHeight（支持px、vh等单位），组件会自动生成带滚动区域的表格结构，表头将自动固定。

示例代码：

public IActionResult YourPage()
{
    var grid = new Grid<YourDataModel>(_dbContext.YourData)
    {
        IsScrollable = true,
        ScrollHeight = "60vh" // 示例：设置为视口高度的60%
    };

    // 列配置示例
    grid.Columns.Add(m => m.Id).Titled("ID");
    grid.Columns.Add(m => m.Title).Titled("标题").Filterable(true);
    grid.Columns.Add(m => m.CreatedAt).Titled("创建时间").Formatted("{0:yyyy-MM-dd}");

    return View(grid);
}

补充CSS调整（若内置样式不生效） #

如果开启配置后表头仍未固定，大概率是页面其他样式冲突导致sticky定位失效，可以补充以下CSS强制生效：

/* 确保滚动容器的溢出设置正确 */
.grid-scrollable .grid-body {
    overflow-y: auto;
}

/* 固定表头，设置背景色防止内容穿透 */
.grid-scrollable .grid-head {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #ffffff;
}

注意事项 #

• 检查父元素是否存在overflow: hidden、transform或perspective等属性，这些会导致sticky定位失效，需要移除或调整。
• 如果使用自定义主题，确认组件生成的类名是否与上述CSS匹配（默认类名：grid-scrollable、grid-head、grid-body）。

不少开发者都通过上述配置成功实现了固定表头，社区里类似问题大多是因为未开启IsScrollable属性，仅尝试前端CSS调整导致无效。

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