在ASP.NET页面中,固定DATAGRID表头出现的问题

使用DIV标签加js纯页面固定表头,实际上就是将表头获取出来填充到一个DIV中,问题就是如何将表头和表中的内容对齐,特别是在表中数据动态改变列宽不固定的时候

要在纯页面中实现表头固定的功能,最常见的方法就是将表格的表头和内容分别放在两个表格中,然后让表头表格固定在页面的顶部。这样,只要在内容表格中动态更新数据,表头表格就可以一直保持在页面的顶部,达到了固定表头的效果。


具体实现方法如下:

将表格的表头和内容分别放在两个表格中。

<div id="table-container">
  <table id="table-header">
    <!-- 表头表格 -->
  </table>
  <table id="table-body">
    <!-- 内容表格 -->
  </table>
</div>

设置表头表格的样式,使其固定在页面的顶部。

#table-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

设置内容表格的样式,使其向下偏移表头表格的高度。

#table-body {
  margin-top: 50px; /* 表头表格的高度 */
}

这样,当你在内容表格中动态更新数据,表头表格就会一直保持在页面的顶部,达到了固定表头的效果。


注意:在实际使用中,你需要根据实际情况调整表头表格和内容表格的样式,确保它们之间的对齐关系。