【HTML/CSS】Tableのヘッダを固定してスクロールする方法

2022/05/22

HTMLのtableのthタグは縦方向・横方向の固定が可能です。以下の例のようにヘッダを固定して縦横スクロールすることができます。

やり方は簡単で、まず固定化したい部分をtrタグではなくthタグにした上でCSSで以下のようにすると固定化できます。

th{
  position: sticky;
  top: 0;
  left: 0;
}

テーブルのところでソース長いから直書きじゃなくgistにアップしておきました。