CSSで見出し固定＋レスポンシブ対応の表を作成
2022年4月27日 CSS, HTML, Webサイト制作 料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 見出しの行を固定する 表の中の行が増えてくると、スクロールした時に表の見出しが画面から見えなくなり、なんの値だったのかがわかりづらくなります。そんな時のために、行数の多い表では一番上にくる見出しの行を固定しておくといいですね。 まずはベーシックな表を作成します。table タグに border-collapse: collapse; を指定することで、セル間のスペースがなくなってフラットな見た目になりますよ。 HTML <table> <tr class="heading"> <th>車
CSSだけでレスポンシブ対応のtableを実装してみた | 無能屋
テーブルをメインに使用しているコンテンツをレスポンシブ対応する必要があるので、色々調べてみて実装してみました。 参考にしたサイトと実装デモ 色々見てみた中で、自分なりに一番しっくりしたレスポンシブ対応の参考サイトはこちら。 Responsive table layout · Matt Smith これを基に実装したテーブルのデモはこちらになります。 レスポンシブ対応 table デモ 各テーブルの説明は下記になります。 縦並びの見出しテーブル 参考サイトとは関係ありませんが、一応縦並びの見出しテーブルのレスポンシブ対応も実装してみました。 会社概要風のテーブル 会社概要とかでよく使われている感じの一般的なテーブルです。 通常 <table class="col-head-type1"> <tr> <th>見出し1</th> <td>コンテンツ</td> </tr> <tr> <th>見出し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
