DATA TABLE
列固定Column Pinning
横向滚动时把关键列（通常是名称列）钉在左侧，右侧列滚过去但名称始终可见。宽表格的必备能力。
效果预览
客户套餐状态金额
Aurora Labs团队版已付费¥ 1,299
Bright Studio专业版试用中¥ 599
Codecraft免费版未激活¥ 0
适合用在哪
列数超过 6-8 列、需要横向滚动的宽表；名称/ID 列最容易成为固定列。
容易踩的坑
- 固定列过多（超过 2 列）时，在 1280px 以下屏幕可滚动区域只剩一小条。
- 固定列背景透明或与行 hover 色不同步，滚动时文字重叠、悬停高亮断开。
- 父容器设了 overflow:hidden 之外的祖先滚动，sticky 失效却难以排查。
设计提示词 · Prompt
列固定（Column Pinning）：固定列用 position:sticky; left:0; z-index:2，并给单元格实底背景色（不能是透明，否则滚动时会透出后面的内容）。在固定列右侧加一条渐变阴影（::after 宽 4px、background:linear-gradient(90deg,rgba(0,0,0,.06),transparent)）暗示「左边是钉住的」。表头的固定列要同时满足 sticky 横向与纵向（z-index 更高）。也可支持固定右侧列（操作列最常见），用 right:0。
Column Pinning: pinned columns use position:sticky; left:0; z-index:2, and the cells need a solid background color (not transparent, otherwise content behind shows through while scrolling). On the right edge of the pinned column, add a gradient shadow (::after 4px wide, background:linear-gradient(90deg,rgba(0,0,0,.06),transparent)) to hint "the left side is pinned". The pinned header cell must be sticky both horizontally and vertically (with a higher z-index). You can also pin columns on the right (most commonly the actions column) using right:0.
常见搭配
同一页面里经常和「列固定」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="width:100%">
<div class="tb">
<div class="tb__row tb__row--hd" style="grid-template-columns:1.1fr .8fr .8fr .8fr"><span class="tb__pin">客户</span><span>套餐</span><span>状态</span><span class="tb__num">金额</span></div>
<div class="tb__row" style="grid-template-columns:1.1fr .8fr .8fr .8fr"><span class="tb__pin tb__c">Aurora Labs</span><span class="tb__c">团队版</span><span class="tb__c">已付费</span><span class="tb__num">¥ 1,299</span></div>
<div class="tb__row" style="grid-template-columns:1.1fr .8fr .8fr .8fr"><span class="tb__pin tb__c">Bright Studio</span><span class="tb__c">专业版</span><span class="tb__c">试用中</span><span class="tb__num">¥ 599</span></div>
<div class="tb__row" style="grid-template-columns:1.1fr .8fr .8fr .8fr"><span class="tb__pin tb__c">Codecraft</span><span class="tb__c">免费版</span><span class="tb__c">未激活</span><span class="tb__num">¥ 0</span></div>
</div>
</div>