html - 卡住 CSS 表格中的两列

Question

我想在 CSS 中卡住前两列，所以我这样做了；

tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  z-index: 999;
}

但这里第一列保持粘性，当第二列到达边缘时它变得粘性，否则它不会，我想让两者都粘性。

Answer 1

对于每个 <th>，您的 css 将粘贴位置设置为 0(左边缘) .因此，滚动时每一列都将保持在左边缘。

对于第一列，您的 css 没问题。但是改变<tbody> <th>到类名，所以它只适用于第一列

第二列应该是这样的

.SecondColumn {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 100px;  /* This is the width of first column, so second will stick to the right edge of the first column */
  z-index: 999;
}