冻结CSS表格中的两列

Question

我想冻结CSS的前两列，所以我做到了；

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

但是这里第一列仍然是粘性的，当第二列接近边缘时它会变得粘稠，否则它不会，我想使两者都变得粘稠。

Answer 1

您的css将每个<th>的摇杆位置设置为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;
}