如何在XSLT中实现HTML表格表头滚动固定效果？

固定表头的效果通过CSS即可实现，和XSLT生成逻辑无关，只需要调整XSLT的输出结构，再配套对应样式即可，具体操作如下：

1 调整XSLT输出的HTML表格结构 #

确保XSLT生成的表格明确区分<thead>和<tbody>标签，不要将表头内容写入<tbody>节点内，参考XSLT模板写法：

<!-- 生成表头部分 -->
<xsl:template match="table-header">
  <thead>
    <tr>
      <xsl:for-each select="header-item">
        <th><xsl:value-of select="."/></th>
      </xsl:for-each>
    </tr>
  </thead>
</xsl:template>

<!-- 生成表格内容部分 -->
<xsl:template match="table-content">
  <tbody>
    <xsl:for-each select="row">
      <tr>
        <xsl:for-each select="cell">
          <td><xsl:value-of select="."/></td>
        </xsl:for-each>
      </tr>
    </xsl:for-each>
  </tbody>
</xsl:template>

2 添加CSS样式实现表头吸顶 #

使用position: sticky属性即可实现表头固定，支持所有现代浏览器（Chrome、Firefox、Safari、Edge）：

/* 可选：表格外层滚动容器，限制表格高度，超出后触发内部滚动 */
.table-container {
  max-height: 600px; /* 可自定义滚动触发高度 */
  overflow-y: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  position: sticky;
  top: 0; /* 表头吸顶的距离顶部阈值 */
  background-color: #ffffff; /* 必须设置背景色，否则滚动时内容会从表头下方透出 */
  z-index: 10; /* 避免表头被其他页面元素遮挡 */
}

注意事项：

• 如果你不需要限制表格高度，仅需要页面全局滚动时表头吸顶，可以省略外层.table-container的定义
• 不要给<th>的任意父级元素设置overflow: hidden属性，否则sticky定位会失效

3 兼容老旧浏览器的备用方案 #

如果需要兼容IE等不支持sticky属性的老旧浏览器，可以采用双表格方案，XSLT分别生成独立的表头表格和内容表格：

<!-- 独立表头表格 -->
<table class="table-header">
  <tr>
    <xsl:for-each select="header-item">
      <th><xsl:value-of select="."/></th>
    </xsl:for-each>
  </tr>
</table>
<!-- 可滚动的内容表格 -->
<div class="table-body-wrapper" style="max-height: 600px;overflow-y:auto;">
  <table class="table-body">
    <xsl:for-each select="row">
      <tr>
        <xsl:for-each select="cell">
          <td><xsl:value-of select="."/></td>
        </xsl:for-each>
      </tr>
    </xsl:for-each>
  </table>
</div>

配套CSS如下，避免两个表格列宽错位：

.table-header, .table-body {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

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