エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
記事へのコメント1件
- 注目コメント
- 新着コメント
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
CSSのみで幅可変のヘッダ固定テーブルを実装 - Qiita
テーブルのヘッダを固定して中身をスクロールさせたいって事、めちゃくちゃあると思います。 当然既にい... テーブルのヘッダを固定して中身をスクロールさせたいって事、めちゃくちゃあると思います。 当然既にいろんな対策が練られています。 方法としては、大きく分けてCSSのみで実装する方法と、JQueryでプラグインなどを用いて実装する方法があります。 (参考:http://webnonotes.com/css/table-header/) しかし、CSSだけで実装する方法では、幅を固定しなければいけないというデメリットがあります。 でも… CSSだけで幅可変のヘッダ固定テーブル、作りたくない? と思ったのでやってみました。 解決法 結論から言うと、calc()とpaddingを利用します。 まずはテーブルを用意。 <table class="table-header-fixed"> <thead> <tr> <th>#</th><th>ヘッダ2</th><th>ヘッダ3</th> </tr> </
2017/05/02 リンク