CSS

画面一杯の高さでヘッダー・フッター固定のテーブルを作る【CSS Grid】

IT / 2020/05/03 / CSS, html

<img loading="lazy" decoding="async" width="1652" height="910" src="https://www.ohmyenter.com/wp-content/uploads/2020/05/e791a97bf66b1d6348d715e898100133.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="https://www.ohmyenter.com/wp-content/uploads/2020/05/e791a97bf66b1d6348d715e898100133.png 1652w, https://www.ohmyenter.com/wp-content/uploads/2020/05/e791a97bf66b1d6348d715e898100133-300x165.png 300w, https://www.ohmyenter.com/wp-content/uploads/2020/05/e791a97bf66b1d6348d715e898100133-670x369.png 670w, https://www.ohmyenter.com/wp-content/uploads/2020/05/e791a97bf66b1d6348d715e898100133-768x423.png 768w, https://www.ohmyenter.com/wp-content/uploads/2020/05/e791a97bf66b1d6348d715e898100133-1536x846.png 1536w" sizes="auto, (max-width: 1652px) 100vw, 1652px" />

Webアプリを開発していると、画面いっぱいまで高さを広げたヘッダー/フッター固定のテーブルを作りたいことが結構あります。いままではJavascriptで高さを設定してたりしましたが、tableタグを捨てればCSSグリッドで簡単に実現することができます。 ...続きを読む

画面一杯の高さでヘッダー・フッター固定のテーブルを作る【CSS Grid】 Read More »

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

IT / 2018/06/22 / CSS, jQuery

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

実物

codepenで作りました。

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

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