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

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

ヘッダ行固定

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