不能直接给设position: sticky，因其display为table-header-group，不符合css规范对sticky元素必须是块级或行内级的要求；真正生效的是元素，需在上设置position: sticky; top: 0并确保父容器有滚动上下文、有背景色和z-index。
直接用 position: sticky 配合 <thead> 是当前最可行的方案，但关键不是给 <code><thead> 加样式，而是给里面的 <code><th> 加 —— 否则在 Chrome/Firefox/Safari 里都无效。
<h3>为什么不能直接给 <code><thead> 设 <code>position: sticky
<thead> 是表格内部的语义容器，浏览器不把它当作 sticky 的“可定位元素”处理。它的渲染受表格布局模型约束，<code>top 值会被忽略。真正响应 sticky 的是 <th> 和 <code><td> 这类单元格级元素。
<ul><li>常见错误现象：<code><thead style="position: sticky; top: 0"> 看起来没反应，滚动时表头跟着动
<li>必须保留标准结构：<code><thead><tr><th>...</th></tr></thead>，不能删掉 <tr> 或把 <code><th> 提到外面
<li>Firefox 旧版本（v90 及之前）对 <code>th 上的 sticky 支持不稳定，v91+ 才推荐直接用
<th> 上怎么写 <code>position: sticky 才生效
只设 position: sticky; top: 0 不够，缺一不可的三个条件：父容器有滚动上下文、<th> 有背景色、<code><th> 有 <code>z-index。
- 父容器必须设
max-height和overflow-y: auto（不能是overflow: hidden） <th> 必须有 <code>background-color，否则滚动时文字会被下方<td> 内容透出 <li> <code>z-index要显式设（比如z-index: 10），尤其当表格嵌在 Modal 或其他层叠上下文中- iOS Safari 要额外加
transform: translateZ(0)或确保<th> 有显式 <code>width（百分比或 px），否则 sticky 区域计算失败固定表头时列宽错位的常见原因
错位几乎都来自
border-collapse: collapse和单元格宽度未对齐。表格默认按内容自适应列宽，滚动后<th> 和 <code><td> 宽度不同步，视觉上就“歪了”。 <ul><li>避免同时用 <code>border-collapse: collapse和在<th>/<code><td> 上单独设 <code>border—— 容易导致 sticky 区域像素偏移 - 推荐统一用
table-layout: fixed+ 每列<th> 和第一行 <code><td> 都设相同 <code>width（如width: 20%） - 如果列宽动态变化（比如内容长度不确定），就得用 JS 同步：
th.style.width = td.offsetWidth + "px"，并在resize和scroll时节流更新 - 别给
<table> 设 <code>display: block或flex—— 会破坏表格语义和列对齐逻辑兼容老浏览器的降级思路
IE 或 Firefox v90 以下没法靠 CSS 实现，得用 JS 模拟。但注意：不能删掉原
<thead>，否则语义和可访问性全丢。 <ul><li>监听 <code>scroll事件，读取滚动距离，用transform: translateY()动态移动<thead> 的视觉位置 <li>保持 <code><thead> 在 DOM 中原位不动，只改样式，不影响屏幕阅读器和 SEO <li>同步列宽时，优先读 <code>offsetWidth而非clientWidth，后者不含 border - 移动端要防 touchmove 频繁触发，加
requestAnimationFrame节流
真正麻烦的不是加几行 CSS，而是让 <th> 的 sticky 行为在各种设备、浏览器、内容长度下都稳定对齐 —— 宽度控制和背景覆盖这两点，漏一个就会出视觉 bug。</th>
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
