「webで何か」作るブログ

35歳という遅すぎるスタートをなんとかする為のブログです。基本的に自分にとっての役立ちメモ。

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を使っていくことでレスポンシブでのテーブル対応も簡単になりました。次回案件からは悩まずに使っていこうと思います。

 

ただし、「セマンティックマークアップ」という概念においては反することなのかなぁとも思うので、この辺りは引き続き考えていきたい部分です。

 

サンプルコード

display : table のためのHTMLサンプル

display : table のためのCSSサンプル