求助：时间列CSS粘性定位失效，横向滚动时偏移

数据老陈

2026-7-5

问题分析与解决方案

问题根源

全局表格样式冲突：给所有table、td设置的position: sticky; left: 0，会和.time-view的粘性定位规则冲突，内部表格元素会干扰外层时间列的定位逻辑，滚动到一定位置后触发错误偏移。
Flex布局宽度收缩问题：.time-view使用flex: 0.5，会让它在容器空间不足时自动收缩，破坏粘性定位所需的固定宽度基础，导致滚动时位置偏移。
时间文本定位语法错误：TimeSlot.css中.time-text的position属性被错误添加引号，导致绝对定位失效，影响时间列的视觉稳定性。

修复步骤

1. 移除冲突的全局表格样式

打开MainCalendar.css，删除table, th, td中的粘性定位相关属性：

table,
th,
td {
    border-spacing: 0px;
    box-shadow: inset 0px 0px 0px 0.1px grey;
    /* 移除以下两行冲突样式 */
    /* position: sticky; */
    /* left: 0; */
    top: 0;
    z-index: 1;
    background-color: white;
}

2. 固定时间列的Flex行为

修改.time-view样式，禁用flex收缩，确保宽度稳定：

.time-view {
    /* 替换flex:0.5为flex-shrink:0，禁止自动收缩 */
    flex-shrink: 0;
    min-width: 100px;
    position: sticky;
    left: 0;
    background-color: white;
    z-index: 5;
}

3. 修正时间文本的定位语法

打开TimeSlot.css，修复position属性的引号问题，并给父元素添加相对定位：

.time-cell {
    height: 30px;
    text-align: center;
    position: relative; /* 新增：作为绝对定位的参考容器 */
}

.time-text {
    display: inline-block;
    padding-left: 4%;
    padding-right: 4%;
    background-color: white;
    /* 去掉引号，改为正确的绝对定位 */
    position: absolute;
    transform: translateY(-50%);
}