tableタグに関する基本あれこれ備忘録

スポンサーリンク

(この記事は2017年11月14日に修正・加筆しました)

コーディングの際
会社概要や沿革などのレイアウトにtableタグを使う機会が多々ありますが、
基本的なことがあやふやで毎回同じこと調べてるので
自分用にtable備忘録を作成しました。

セルの罫線をくっつけたい=border-collapseで設定

ちなみに、Firefoxでcollapseの設定をしたところ
borderが消えてしまうという現象を見たことがあります(Firefoxのバグ?)。

以下のコードで改善したので、同じ現象が見られている方はお試しください。

セルに対する設定は、th・tdに

borderや背景など、ついtrに設定しがちですが、trに設定しても効きません。
直接セルに指定します。

thを上揃え・左揃えにする。

thはデフォルトでは、縦・横とも真ん中揃えになっていますが
スタンダード(?)の上揃え・左揃えにするには下の設定を。

セルの結合

縦結合と横結合、
いつもどっちがどっちかわからなくなるんですよねー。

このような記述で、以下のような表示になります。
縦結合はrowspan
横結合はcolspan
です。

縦3マス結合 縦1 あああ いいい
縦2 横2マス結合
縦3 さささ ししし

検索するとテーブルのジェネレーターなんかもあるので、
使ってみると効率化に良いかもです。
Table Tag Generator

スマホで横幅がはみ出すとき

box-sizing: border-box; + width: 100%;を指定しても
ディスプレイ幅よりはみ出していることがあります。
そんな時は、

table-layout: fixed;を付与すると
しっくり100%に収まります。


まとめ

以上、初歩的なことからレスポンシブ対応まで
基本的なことをまとめました。

応用編もありますので、よかったら合わせてどうぞ。
tableタグに関するあれこれ備忘録【応用編】|nico MEMO

コメント

タイトルとURLをコピーしました