position – CSS: カスケーディングスタイルシート | MDN#sticky 端の一列は簡単です。td 要素にposition: stickyをつけ、固定したい方向にleft: 0の様にするのみでよしなにしてくれます。次のデモがこれです。 /* 1列目を左端に固定 */ td:first-child { position: sticky;// 固定 left: 0; // 左端 } 上下の複数行はちょっと工夫が要りますが、シンプルではあります。上部はtheadで固定したい範囲を囲ってtheadにposition: stickyをかけます。下部はtfootとして同様です。次のデモがこれです。 thead { position: sticky; top: 0; } tfoot { position: sticky; bottom: 0; } 左右の複数列は上下複数行に比べてずいぶん
![【React】table 上の左複数列を固定する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/f8777c613a386cd2aec2b188c3f185c82e3a6d38/height=288;version=1;width=512/https%3A%2F%2Fcpoint-lab.co.jp%2Fwp-content%2Fuploads%2F2024%2F02%2Freact-768x432.png)