怎样用CSS sticky定位实现表格首列冻结效果-css教程-PHP中文网

因为thead不是渲染盒，真正需设position: sticky的是首列的th和td；必须满足：外层overflow-x:auto+定宽、table-layout:fixed、所有首列单元格加sticky+left:0+背景色+z-index，且z-index需分层。

怎样用css sticky定位实现表格首列冻结效果

为什么只给 `thead` 加 `position: sticky` 没用

因为 thead 本身不是渲染盒（rendering box），浏览器不把它当作 sticky 的作用目标——它只是语义容器。真正要“粘住”的是每个单元格，尤其是首列的 th 和 td。你看到样式在开发者工具里生效，但滚动时毫无反应，大概率就是这个原因。

`position: sticky` 对首列生效的硬性前提

缺一不可，否则 left: 0 直接被忽略：

外层容器必须设 overflow-x: auto（或 scroll），且有明确宽度（不能靠内容撑开）
table 必须设 table-layout: fixed，否则列宽浮动，left: 0 会随重排偏移
首列的 th 和 tbody td:first-child 都得加 position: sticky; left: 0（不能只加 one side）
所有 sticky 元素必须显式设 background-color 和 z-index，否则滚动时下方文字透出、层级错乱

首列冻结的最小可行 CSS 片段

以下样式可直接复用，注意顺序和选择器精度：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.table-container {
  overflow-x: auto;
  width: 100%;
}
<p>table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}</p><p>th, td {
padding: 10px;
border: 1px solid #ddd;
}</p><p>/<em> 首列 th </em>/
thead th:first-child {
position: sticky;
left: 0;
background: white;
z-index: 10;
}</p><p>/<em> 首列 td </em>/
tbody td:first-child,
tbody th:first-child {
position: sticky;
left: 0;
background: white;
z-index: 5;
}
</p>

关键点：z-index: 10 和 z-index: 5 不是随便写的——左上角单元格（thead th:first-child）必须高于普通首列单元格，否则会被盖住。