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

Question

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

Answer 1

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

---

具体实现方法如下：

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

<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; /* 表头表格的高度 */
}

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

---

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