画面一杯の高さでヘッダー・フッター固定のテーブルを作る【CSS Grid】
Webアプリを開発していると、画面いっぱいまで高さを広げたヘッダー/フッター固定のテーブルを作りたいことが結構あります。いままではJavascriptで高さを設定してたりしましたが、tableタグを捨てればCSSグリッドで簡単に実現することができます。
CSS
ヘッダー固定でtbodyスクロール可・td幅残り全部のテーブルをサクッと作る
かなり今更な内容なのですが、タイトルの通り、ヘッダー固定のテーブルをサクッと作る方法です。overflowでtbodyがスクロールできて、さらにtd幅を一つを除き指定、最後の一つは残り全部にするってやつです。
実物
codepenで作りました。
See the Pen ヘッダー固定・td幅残り全部なテーブル by itmammoth (@itmammoth) on CodePen.