ヘッダー固定でtbodyスクロール可・td幅残り全部のテーブルをサクッと作る


かなり今更な内容なのですが、タイトルの通り、ヘッダー固定のテーブルをサクッと作る方法です。overflowでtbodyがスクロールできて、さらにtd幅を一つを除き指定、最後の一つは残り全部にするってやつです。

実物

codepenで作りました。

See the Pen ヘッダー固定・td幅残り全部なテーブル by itmammoth (@itmammoth) on CodePen.

ポイントはcssなのです。まずtheadとtbodyを display: blockにしてます。そしてtbodyに overflow: scroll、さらに heightを指定しています。

ここまでの状態でtbodyをスクロールできるヘッダー固定のテーブルはできたのですが、各カラムの幅を指定していないと最低限の幅しか確保されず、テーブルっぽく表示されません。

そこでカラム幅を指定するわけすが、ここでテーブル自体の固定幅が決まっていないとき(例えばwidth: 100%とか)、どれか一つのカラムに「残り全部」指定したくなることがあると思います。

cssのcalcを使うとか、javascriptで計算して設定するとか、そういう方法もあると思いますが、ちょっと手抜きでサクッと実現できる方法があります。それが先程のサンプルで指定している通り、 min-widthwidth: 99999pxです。ただそれだけ。このサンプルではdescriptionカラムを「残り全部」指定していることになります。

99999pxというのは単にめちゃデカイ値を指定しておけばいいです。しかしこれだけだと、他のカラム幅が極限まで縮んでしまうので、そこを min-widthで幅を保証しているというわけです。

やや強引な方法ですが、少なくともChrome、Firefox、Safariではちゃんと表示できます。きっちりした性格の人には耐えられない方法かもしれませんが、他の方法で実現するのはかなり面倒くさいので・・・。

ま、手抜き実装としては充分使えるんじゃないかと思います。

関連する記事


コメントを残す

メールアドレスが公開されることはありません。

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください