css 实现table 冻结首行与左边六列

在CSS中实现表格冻结首行和左边六列通常通过CSS Grid布局或者Flexbox配合`position: sticky`来完成。这里我们以CSS Grid为例说明：

首先，设置表格容器为Grid容器，并设置适当的行高（`grid-template-rows`）和列宽（`grid-template-columns`）。假设整个表格有三行四列，我们可以这样设置：

.container {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto; /* 六列冻结，最后一列为自由伸缩 */
  grid-template-rows: repeat(3, auto); /* 三行 */
  position: relative; /* 父级元素需要定位以便于子元素的position: sticky应用 */
}

.table {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 表格总共有七列 */
  grid-template-rows: auto;
}

然后，在`.table tr:first-child td`选择器下应用`position: sticky`，使其顶部固定：

.table tr:first-child td {
  position: sticky;
  top: 0; /* 冻结首行 */
  background-color: #f5f5f5; /* 添加背景色区分效果，可根据需求调整 */
}

对于左侧六列，因为`grid-template-columns`已经设置了六列的宽度，所以它们会自动冻结。如果想要更精确地控制，可以添加`:nth-of-type(n)`伪类针对特定列：

.table td:nth-of-type(1) ~ td {
  /* 从第二列开始至第六列 */
  position: sticky;
  left: 0; /* 冻结左边六列 */
}

注意：`position: sticky`在一些旧版浏览器中可能存在兼容性问题，如果需要更好的跨浏览器支持，可以考虑使用JavaScript库如`stickyfill.js`。