CSS实现表格首列固定，横向滚动

 <div className="layer">
      <div className="layer-scroll">
          <table className="table">
            //...
          </table>
      </div>
 </div>

对应样式如下

.layer {
  display: flex;
  height: 100%;
  padding: 8px;
  .layer-scroll {
    width: 100%;
    overflow: auto;
    .table {
      width: auto; /* 自动适应内容宽度 */
      border: 1px solid #bbb;
      th,
      td {
        padding: 8px; /* 设置单元格内边距 */
        white-space: nowrap; /* 防止文本换行 */
        text-align: left; /* 文本左对齐 */
        border: 1px solid #bbb; /* 设置单元格边框 */
      }
    }
  }
}

此时可以滚动起来了，需要固定首列的话，再首列对应的td上加样式

  <td className="sticky-row" style={{ width: 215 }}>
        //...
 </td>


 .sticky-row {
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: white;
  }

完成以上步骤，可以实现首列固定+横向滚动效果；如果表格设置了边框的话，会发现边框没了，继续改css即可

  .sticky-row::after {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    width: 205px;   //需对应加了样式的td宽度
    border: 1px solid #bbb;
    content: '';
    pointer-events: none;
  }

over