ヘッダ固定のスクロールテーブル

• トップ
• 逆引きリファレンス
• ヘッダ固定のスクロールテーブル
• ヘッダ行・列複数固定

ヘッダ列固定

• 最初の1列をヘッダとして固定化するサンプルです。
• th:nth-child(1) を position:sticky, left:0 で固定しています。
• stickyにするとテーブルのボーダーが消えてしまう 問題回避のために border-collapse:collapse は使用していません。
• 代わりに border-spacing:0 を使用しています。
• するとボーダーが太くなってしまうので、セルには右と下のみ、テーブルの外枠に上と左のボーダーを引いています。
• Chrome のバグなのかウィンドウにスクロールバーが表示されると、固定部のボーダーが若干ずれたり、ボーダーが見えなくなってしまうことがあります。
• ソースは下記を参照してください。
  • CSSソース
  • HTMLソース