テーブルのExcel風行固定をHTMLとCSSだけでする

問題

tableの表が画面をはみ出るので、上の見出しの列や左側の何列かを、Excelのように固定表示したいです。

スタイルシートでできますか？

答え

position:sticky; である程度できる。

上1行目、左1列目を固定するなら、あまり難しくない。

上1行目はthに以下を指定でよい。

position: sticky;
top: 0;

左1列目はtdに以下を指定でよい。

position: sticky;
left: 0;

上複数行を固定するには、高さが固定されている必要がある。

2行目をこうするなら、1行目は高さ30pxであってほしい。折り返して高さが変わるようなレイアウトだと、JavaScriptの助けが必要となる。

position: sticky;
top: 30px;

同様に2列目、3列目を固定するなら、以下のような指定をすることになり、幅を固定する必要がある。

position: sticky;
left: 100px;

まとめ

固定する行の高さ、列の幅が固定されていれば、position:sticky; と、top, left の指定で対応できる。

固定する行の高さ、列の幅が固定されていない場合は、画面表示後にJavaScriptで top, left を指定すれば対応できる。

デモ） Excel風行固定表示