thead设position: sticky不吸顶是因为其display: table-header-group不在规范支持范围内，真正生效的是每个th必须设position: sticky; top: 0; z-index: 1070; background-color: white，且父容器需有max-height和overflow-y: auto，祖先不能含transform/filter等截断滚动链的属性。
position: sticky 是最直接有效的方案，但必须满足几个硬性条件，否则表头根本不会“粘”住——不是代码写错了，而是环境没配对。
为什么 thead 设了 position: sticky 却完全不吸顶？
常见错误是只给 <thead> 或 <code><tr> 加样式，而真正起效的必须是每个 <code><th> 单元格：
<ul><li><code><th> 必须显式声明 <code>position: sticky; top: 0;，<thead> 层级设 sticky 无效
<li>父容器（比如 <code><div class="table-responsive">）必须有 <code>max-height 和 overflow-y: auto，否则没有滚动上下文，sticky 不触发
transform、filter 或 will-change，这些会创建新层叠上下文，切断 sticky 的滚动链<tr> 或 <code><thead> 上写了 <code>overflow: hidden，会裁剪 sticky 元素的渲染区域
Bootstrap 表格里表头“半固定”或被下拉菜单盖住怎么办？
Bootstrap 的 .dropdown-menu 默认 z-index: 1050，.modal 是 1060，如果 <th> 的 <code>z-index 是 auto 或 100，就会被遮挡：
<th> 必须设 <code>z-index: 1070（不能是auto，也不能太小）- 必须设
background-color: white（或其它不透明色），否则滚动时 tbody 内容会透上来 - 避免把表格嵌在
.modal或.offcanvas里——它们内部默认用了transform，得把表格抽出来单独包一层滚动容器 - 设置
table-layout: fixed在<table> 上，强制按 th 宽度分配列 <li>确保所有 <code><th> 和对应 <code><td> 有明确的 <code>width或使用min-width统一基准最容易被忽略的是：sticky 表头依赖滚动容器的“边界完整性”。哪怕只是外层
<div> 多了个 <code>transform: translateY(0)，或者 modal 弹窗用了transition，都可能让整个 sticky 链失效——这不是浏览器 bug，是规范行为。调试时优先检查祖先元素的 CSS 属性，而不是反复改<th> 样式。</th>
表头和内容列宽错位、滚动条挤窄了 tbody 怎么办？
当父容器出现垂直滚动条时，<tbody> 宽度会被自动压缩（滚动条占约 17px），但 <code><thead> 没被压缩，导致列不对齐：
<ul><li>给 <code><thead> 加 <code>padding-right: 17px（或用 calc(100% + 17px) 调整宽度）
