僕とコードとブルーハワイ

omega (@equal_001) の日記

テーブルのタイトル固定・データ行をスクロール

 

tableのスクロール処理で困ったのでメモ。

 

CSSには「overflow」という便利なものがあるのでこれを使いたい。

しかし、そのままタグで囲ったりすると、テーブル全体がスクロールしてしまう。

・テーブルのタイトル部分のみ固定したい。

CSSだけで片付けたい。ライブラリとか使いたくない(あるか知らないけど)。

 

 

まずは、タイトル部分とデータ部分に切り分けておく。

<thead></thead>  /*タイトル部分用*/

<tbody></tbody> /*データ部分用*/

これらにそれぞれ名前つけて、<tbody></tbody>に囲まれたデータ部分のみoverflowさせればいける。