CSSで見出し固定＋レスポンシブ対応の表を作成

CSSで見出し固定＋レスポンシブ対応の表を作成料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 見出しの行を固定する表の中の行が増えてくると、スクロールした時に表の見出しが画面から見えなくなり、なんの値だったのかがわかりづらくなります。そんな時のために、行数の多い表では一番上にくる見出しの行を固定しておくといいですね。 まずはベーシックな表を作成します。table タグに border-collapse: collapse; を指定することで、セル間のスペースがなくなってフラットな見た目になりますよ。 HTML <table> <tr class="heading"> <th>車体名</th> <th>価格</th> <th>燃費</th

[style_blue]

そのうち使えそうな気がするのでメモ。

[demAge]

position:stikeyは多分IE11で死んでしまう…ので…(悲しい表情)

[gerakoma]

おぼえとこ

[awajiisland]

ありがたや。今度読むだと、一生読まないかもしんないので週末までにコード書いてみる！

[norip44]

よくつまりがちですよね。あらためてまとめてあるので、ありがたい！

[hackapellmanda]

今度読む

[gayou]

contentでdata-labelの値を要素に入れることができるのか。

[h_taiji]

覚えておく

[kawaosa]

table レスポンシブ対応テーブル　スマホでは縦並びになる表