无<th>标签时如何通过CSS实现表格表头行sticky固定？

我们通过CMS写作平台制作文档，借助第三方插件导出为HTML后，发现表格表头未使用<th>标签，而是给<td>添加了confluenceTh类。以术语表顶部的字母表头行为例，每个字母都是跳转到对应术语章节的链接，我们希望实现该行sticky固定效果，方便用户点击跳转。

导出的<thead>片段如下：

<thead class=" ">   
            <tr>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_safe-id-R2xvc3NhcnktIw">#</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-a">A</a></p>
                </td>
                <!-- 其余字母td省略 -->
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-xyz">XYZ</a></p>
                </td>
            </tr>
        </thead>

我们尝试给<thead>标签和confluenceTh类添加position: sticky;但均无效，求无需修改HTML的CSS解决方案。

可以通过以下CSS实现固定效果，核心是补充sticky生效的必要属性，并处理表格的定位上下文：

/* 为表格设置溢出上下文，确保sticky定位生效 */
table {
    overflow: auto;
}

/* 针对表头单元格设置sticky固定 */
thead tr .confluenceTh {
    position: sticky;
    top: 0; /* 必须指定偏移值，这是sticky生效的关键 */
    z-index: 10; /* 确保表头在滚动时处于内容上层 */
    background-color: #ffffff; /* 避免表头透明导致下方内容穿透 */
}

关键说明 #

• top: 0不可缺：仅设置position: sticky而不指定偏移位置，浏览器无法确定固定规则，sticky不会生效。
• 溢出上下文处理：若表格或其父容器的overflow为默认的visible，部分浏览器无法识别sticky的定位范围，添加overflow: auto可解决此问题。
• 背景与层级：设置背景色避免滚动时下方内容透出，z-index确保表头不被其他元素遮挡。

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