table関連のレスポンシブ対応方法メモ
コーポレートサイトを作る場合、<table>タグを非常に高い確率で使用します。
普通に使う分には特に問題はないのですが、レスポンシブ対応のケースでは融通がきかなくて困っていました。
例えば、
- PC表示だと縦のセル連結するけど、スマホではしない
- でも、テキストはちゃんと上下中央配置にしたい
- テキストの行数は結構バラバラ
こんな条件が揃うと通常の<table>だと厳しいというか、CSSが肥大化してしまいがちです。
後々の管理のためにももっとスッキリさせたいですし、そもそも対応できるのか?という疑問から、今回tableについて調べました。すると、超絶便利なものが有るではないですか。
今までtableタグしか知らなくて驚愕。
要素がtableタグ風に振る舞うdisplayプロパティ
CSSのdisplayプロパティを使って、各要素をtableでマークアップされた様に表示が可能です。簡単なメモから。(間違いのご指摘は尻尾を振って喜びます。)
:table
内包する要素のtable系プロパティを有効にします。
:table-row
tableタグにおける<tr>のように振る舞います。
:table-cell
tableタグにおける<td>のように振る舞います。のように振る舞います。
併せて覚えておきたい display関連のプロパティ
:inline-block
テーブル(行)の中でセルを左右に分けたい時に重宝しました。
例えば「企業の沿革」ページなどよくある、
文章だけの行もあれば、文章と画像が入る行もあるというケース。
display:table-cellだとrowspanやcollspanなどが使用できないので、そのままだと縦に並んでしまうのですが、table-cellの中でinline-blockを上手く使うといい感じに処理ができます。
その他、テーブルで便利なCSS
vertical-align
なんと言ってもこれです。
というか、display:tableを利用する最大のメリットはこのvertical-alignが使えることかもしれません。
display:tableとdisplay:blockを使っていくことでレスポンシブでのテーブル対応も簡単になりました。次回案件からは悩まずに使っていこうと思います。
ただし、「セマンティックマークアップ」という概念においては反することなのかなぁとも思うので、この辺りは引き続き考えていきたい部分です。
サンプルコード