ヘッダー固定でtbodyスクロール可・td幅残り全部のテーブルをサクッと作る 25,212件のビュー 「で、結局オブジェクト指向って何が良いわけ？」という手続き型脳の貴男へ 24,480件のビュー 【Android】爆サイの専用ブラウザアプリ作った 23,770件のビュー


今までヘッダーを固定しようとした場合は以下のCSSのようにposition:fixedを使い、更にbodyに対して固定ヘッダー分のmarginを取るといった設定が必要でした。 テーブルに表示する情報が多いとき、行ヘッダや列ヘッダを固定して表示したいときがある。そんなときには position: sticky を使うと簡単に実装できる。 ただしIEは対応していないため、ポリフィルが必要となる。 完成予想イメージは以下のとおり。 tableの行列のヘッダを固定、データをスクロール: ExcelのようなテーブルをjQueryで再現 これは google で "html table header 固定" を検索した結果の中の1つです。 他にもたくさんの情報がヒットします。
今回はヘッダー固定に便利なCSS position:stickyを紹介します。 従来のヘッダー固定方法.

HTMLだけでなんとかする。(ヘッダを別のtableに分ける…とかそんな感じのもの) CSSだけでなんとかする。(ヘッダ部分をpositionで固定するとか、tbodyにoverflowかけたりする) JavaScriptを使ってなんとかする。(SuperTable とか使って) CSSとJavaScriptを使ってなんとかする。