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

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

ヘッダ行・列固定

• 1行目と1列目をヘッダとして固定するサンプルです。
• 左上端の1行目・1列目のセルが他のセルの下に潜り込まないように z-index:1 を指定しています。
• スクロールするとヘッダ行の下線が消えてしまう問題を防ぐために、ヘッダ行に下線を引き、tbody 先頭行の上部の線を消しています。
• stickyにするとテーブルのボーダーが消えてしまう 問題回避のために border-collapse:collapse は使用していません。
• 代わりに border-spacing:0 を使用しています。
• するとボーダーが太くなってしまうので、セルには下と右のみ、テーブルの外枠に上と左のボーダーを引いています。
• Chrome のバグなのかウィンドウにスクロールバーが表示されると、固定部のボーダーが若干ずれたり、ボーダーが見えなくなってしまうことがあります。
• ソースは下記を参照してください。
  • CSSソース
  • HTMLソース