最推荐用 position: sticky 实现表头吸顶，需外层 div 设置 max-height 和 overflow-y: auto，thead 或 th 设 sticky + top: 0、background-color 和 z-index，table 加 table-layout: fixed 并统一列宽。
用 CSS 实现 HTML 表格表头吸顶，最推荐的方式是 position: sticky，它原生、轻量、无需 JS，但必须满足几个关键条件才能真正生效——不是加了 sticky 就自动“吸住”。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
确保父容器创建滚动上下文
表头要吸顶，前提是它在一个可垂直滚动的容器里。直接给 <table> 设 <code>max-height 和 overflow-y: auto 是无效的（<table> 本身不支持 <code>overflow），必须用外层 <div> 包裹：
<ul>
<li>给包裹容器设 <code>max-height: 400px（或具体高度）和 overflow-y: auto
overflow: hidden 或 transform、filter 等会阻断 sticky 的属性position: relative，作为 sticky 定位的参考上下文（虽非强制，但更稳妥）正确设置表头样式
<thead> 只是语义标签，不会自动吸顶。需显式为其中的 <code><th> 或整个 <code><thead> 添加样式：
<ul>
<li>加 <code>position: sticky 和 top: 0
background-color（如 white），否则滚动时文字可能被下方内容透出遮挡z-index: 10 或更高，确保表头在滚动内容之上<thead> 加 <code>position: fixed——它会脱离文档流，导致列宽错位、无法对齐 <tbody>
<h3>保持列宽一致，避免错位</h3>
<p>滚动时表头和内容列不对齐，是最常见的问题。根源在于 <code><tbody> 滚动后，浏览器可能重新计算列宽：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>给 <code><table> 加 <code>table-layout: fixed
<th> 和对应列的 <code><td> 设置相同宽度（可用百分比、px 或 <code>width: 1fr 配合 grid 布局）
<th> 内容过长撑开列宽，可加 <code>white-space: nowrap; overflow: hidden; text-overflow: ellipsis
兼容性与降级处理
position: sticky 在现代浏览器中支持良好（Chrome 56+、Firefox 59+、Safari 13.1+），但旧版 IE 完全不支持：
- 若需支持 IE 或极老版本，可改用 JavaScript 方案：监听滚动，动态切换
position: fixed类，并手动同步列宽 - 简单降级：不加 sticky，仅靠语义化
<thead> + 清晰视觉分隔（如加粗、背景色），保证基本可读性 <li>移动端注意：iOS Safari 对 sticky 的支持曾有 bug，建议测试真机，必要时加 <code>-webkit-overflow-scrolling: touch
