かなり今更な内容なのですが、タイトルの通り、ヘッダー固定のテーブルをサクッと作る方法です。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-widthとwidth: 99999pxです。ただそれだけ。このサンプルではdescriptionカラムを「残り全部」指定していることになります。

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

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

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

関連する記事

• 画面一杯の高さでヘッダー・フッター固定のテーブルを作る【CSS Grid】
• ウィンドウリサイズに応じて要素をサイズ調整させるjQueryプラグイン
• capybaraを使ってWebページをスクレイピングする（テストじゃなくて）
• ViewPager + TabLayout + AdMob コード例
• 要素が表示されたら関数を実行する jquery.showuptrigger