position: strick 固定标题列

---

前言

最近做了一个可点选范围的table组件，如下图所示，头部固定容易实现，同时首列也需要固定，发现一个未用过的CSS特性可以简便的实现这个要求

组件构造

样式搭建

首先要保证标题列与同行其他元素样式隔离，可以使用标签选择器实现，这里我在数据层做了隔离

构建基础结构，双层循环：

      <div id="tableWrap" className={`${styles.unit_table}`}>
        {
          tableData.map((floorInfo) =>
            <div className={styles.unit_table_row} key={floorInfo?.floor}>
              <div className={styles.unit_table_floor_col}>{`${floorInfo?.floor}层`}</div>
              {floorInfo?.doorList.map(door =>
                <div
                  ref={ref}
                  key={door}
                  className={`${styles.unit_table_floor_door} }`
                  }
                  onMouseDown={(event) => { clickDoor(door, event) }}
                >
                  {[doorRange?.begin, doorRange?.end].includes(door) && <div className={styles.unit_start_label}>{
                    door === doorRange?.begin ? '起' : '止'
                  }</div>}
                  {door}
                </div>
              )}
            </div>
          )
        }
      </div >

    .unit_table_row {
      height: 48px;
      width: fit-content;
      display: flex;
    }

    .unit_table_floor_door {
      // width: 70px;
		···
      display: flex;
      justify-content: center;
     // border: 1px solid rgba(51, 112, 255, 0.07);
     // position: relative;

    }

表头元素设置 position: strick

当某个元素满足以下条件时

• 位于父容器的边缘位置
• 元素未脱离文档流

此时该元素会形成类似于position: fixed的定位效果，但不是相对于整个屏幕，而是相对于父元素，不会破坏本身和其父元素的文档流。再将堆叠优先级调高，即可实现固定标题列的效果

   .unit_table_floor_col {
     // width: 50px;
     // font-size: 12px;
     // font-family: PingFang SC;
     // font-weight: 500;
     // color: rgba(54, 57, 66, 1);

      position: sticky;
      left: 0;
      z-index: 9;
      background: #fff;
      display: flex;
      justify-content: center;
    }

效果如图，首列固定，右侧滑动