CSS单轴滚动容器的怪异行为以及修复实例页面

展示

左右两侧表格内容完全一致：首列吸附在容器的横向滚动上，表头则希望吸附在页面的纵向滚动上。请滚动页面，对比两侧表头的表现差异。

修复前：overflow-x: auto

著作	章节	核心知识点	篇幅	难度	状态
《CSS世界》	第1章概述	CSS 世界观与学习路径	32 页	入门	已出版
《CSS世界》	第4章盒模型四大家族	width、height 与 box-sizing	46 页	进阶	已出版
《CSS世界》	第6章层叠规则	z-index 与层叠上下文	38 页	进阶	已出版
《CSS世界》	第12章流的破坏与保护	float、BFC 与清除浮动	52 页	进阶	已出版
《CSS选择器世界》	第1章选择器概述	选择器分类与优先级计算	28 页	入门	已出版
《CSS选择器世界》	第3章用户行为伪类	:hover、:focus 与交互态	44 页	进阶	已出版
《CSS选择器世界》	第5章伪元素	::before、::after 与 content	40 页	进阶	已出版
《CSS选择器世界》	第8章选择器性能	匹配原理与书写优化	22 页	进阶	已出版
《CSS选择器世界第二版》	第2章逻辑组合伪类	:is()、:not()、:where()	36 页	进阶	已出版
《CSS选择器世界第二版》	第4章子元素过滤伪类	:nth-child() 大家族	42 页	进阶	已出版
《CSS选择器世界第二版》	第7章树结构伪类	:has() 与父选择器	48 页	高级	已出版
《CSS选择器世界第二版》	第10章选择器的未来	新特性与兼容处理	30 页	高级	已出版
《CSS新世界》	第3章更强的布局能力	Flex、Grid 与 masonry	56 页	进阶	已出版
《CSS新世界》	第5章视觉表现新特性	filter、混合模式与裁剪	44 页	进阶	已出版
《CSS新世界》	第8章变量与函数	自定义属性与 calc()	34 页	进阶	已出版
《CSS新世界》	第11章新的 @ 规则	@layer、@container、@scope	50 页	高级	已出版
《HTML并不简单》	第2章表单元素	input 的百种形态	46 页	入门	已出版
《HTML并不简单》	第4章语义化标签	标签选择与可访问性	38 页	入门	已出版
《HTML并不简单》	第6章原生交互	dialog、popover 与 details	42 页	进阶	已出版
《HTML并不简单》	第9章性能与加载	资源提示与预加载策略	30 页	进阶	已出版

纵向滚动时，表头跟着页面一起滚走了。

修复后：overflow-x: auto + overflow-y: clip

著作	章节	核心知识点	篇幅	难度	状态
《CSS世界》	第1章概述	CSS 世界观与学习路径	32 页	入门	已出版
《CSS世界》	第4章盒模型四大家族	width、height 与 box-sizing	46 页	进阶	已出版
《CSS世界》	第6章层叠规则	z-index 与层叠上下文	38 页	进阶	已出版
《CSS世界》	第12章流的破坏与保护	float、BFC 与清除浮动	52 页	进阶	已出版
《CSS选择器世界》	第1章选择器概述	选择器分类与优先级计算	28 页	入门	已出版
《CSS选择器世界》	第3章用户行为伪类	:hover、:focus 与交互态	44 页	进阶	已出版
《CSS选择器世界》	第5章伪元素	::before、::after 与 content	40 页	进阶	已出版
《CSS选择器世界》	第8章选择器性能	匹配原理与书写优化	22 页	进阶	已出版
《CSS选择器世界第二版》	第2章逻辑组合伪类	:is()、:not()、:where()	36 页	进阶	已出版
《CSS选择器世界第二版》	第4章子元素过滤伪类	:nth-child() 大家族	42 页	进阶	已出版
《CSS选择器世界第二版》	第7章树结构伪类	:has() 与父选择器	48 页	高级	已出版
《CSS选择器世界第二版》	第10章选择器的未来	新特性与兼容处理	30 页	高级	已出版
《CSS新世界》	第3章更强的布局能力	Flex、Grid 与 masonry	56 页	进阶	已出版
《CSS新世界》	第5章视觉表现新特性	filter、混合模式与裁剪	44 页	进阶	已出版
《CSS新世界》	第8章变量与函数	自定义属性与 calc()	34 页	进阶	已出版
《CSS新世界》	第11章新的 @ 规则	@layer、@container、@scope	50 页	高级	已出版
《HTML并不简单》	第2章表单元素	input 的百种形态	46 页	入门	已出版
《HTML并不简单》	第4章语义化标签	标签选择与可访问性	38 页	入门	已出版
《HTML并不简单》	第6章原生交互	dialog、popover 与 details	42 页	进阶	已出版
《HTML并不简单》	第9章性能与加载	资源提示与预加载策略	30 页	进阶	已出版

纵向滚动时，表头吸顶固定在页面顶部。

代码

CSS代码：

/* 滚动容器 */
.table-wrap {
    overflow-x: auto;
    background-color: #fff;
    border: 1px solid #d0d0d5;
}
/* 修复：纵向轴使用 clip，容器仅保留横向滚动 */
.table-wrap.fixed {
    overflow-y: clip;
}

/* 表头吸顶 */
thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #e8eef7;
}
/* 首列吸附在容器的左侧 */
th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #fff;
}
thead th:first-child {
    left: 0;
    z-index: 3;
    background-color: #e8eef7;
}

HTML代码：

<!-- 修复前 -->
<div class="table-wrap origin">
    <table>
        <thead>
            <tr>
                <th scope="col">著作</th>
                <th scope="col">章节</th>
                <th scope="col">核心知识点</th>
                <th scope="col">篇幅</th>
                <th scope="col">难度</th>
                <th scope="col">状态</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">《CSS世界》</th>
                <td>第1章 概述</td>
                <td>CSS 世界观与学习路径</td>
                <td>32 页</td>
                <td>入门</td>
                <td>已出版</td>
            </tr>
            <!-- 更多数据行 -->
        </tbody>
    </table>
</div>

<!-- 修复后：仅结构一致，容器多了 overflow-y: clip -->
<div class="table-wrap fixed">
    <table>……</table>
</div>

JS代码：

// 特性检测：是否支持单轴滚动容器
if (CSS.supports("named-feature(single-axis-scroll-container)") == false) {
    document.getElementById("unsupported").hidden = false;
}