テーブルの横スクロール時に、左端の見出しセルを固定

jQuery を使って、テーブルの横スクロール時に、左端の見出しセルを固定。position: sticky は table との相性が悪いのか？ブラウザーによっては、ボーダー表示に不具合が出るので使用していない。

デモページを表示

CSS

補足

• 複製したテーブルを元のテーブルに重ねて表示している。
• 複製したテーブルは見出し以外のセルを非表示にして、左端の固定位置に表示している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• load、resize 時に、見出し用のテーブルを元のテーブルから複製している。
• セル内の折返しで各行の高さが変わってしまうので、複製する前に、行の高さをあらかじめ設定している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 見出しの位置固定とスクロールバーを表示するために、テーブルをふたつの div 要素で囲っている。