【CSS】positionːstickyを使ってtableの行列を固定する方法

CSS

position: stickyを使用することで、tableの行や列を固定することができます。

  1. table要素にposition:relativeを指定します。
  2. 固定したい行や列に対して、position:sticky; top, leftなどのプロパティを指定します。
  3. 表示させたい列や行に対して、z-indexプロパティを指定します。

例：

table {
  position: relative;
}
th {
  position: sticky;
  top: 0;
  background-color: #f0f0f0;
  z-index: 1;
}
td:first-child {
  position: sticky;
  left: 0;
  background-color: #f0f0f0;
  z-index: 1;
}

このように指定することで、固定したい行や列はスクロールに合わせても画面上に表示され続け、その他の部分はスクロールされます。