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

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

ヘッダ行・列複数固定

• 複数行・複数列固定するサンプルです。
• 2行目・2列目に top: や left: を指定する必要があるため、1行目・1列目は固定長である必要があります。
• stickyにするとテーブルのボーダーが消えてしまう 問題回避のために border-collapse:collapse は使用していません。
• 代わりに border-spacing:0 を使用しています。
• するとボーダーが太くなってしまうので、セルには右と下のみボーダーを引き、テーブルの外枠に上と左のボーダーを引いています。
• thead の中の1～2列目はスクロールコンテンツの下敷きにならないように z-index を指定しています。
• Chrome のバグなのかウィンドウ自体にスクロールバーが表示されると、固定部のボーダーが若干(1pxくらい)ずれたり、ボーダーが見えなくなってしまうことがあります。
• ソースは下記を参照してください。
  • CSSソース
  • HTMLソース