横2列以上 複数カラムあるテーブルを CSSだけでレスポンシブ対応する一番分かりやすい方法

こんな感じのテーブルありますよね。縦横どちらにも項目がある表です。縦2レコード、横2カラムの表です。

横2列以上 複数カラムあるテーブル レスポンシブ対応


この手の表をレスポンシブ対応するのは結構大変です。本来スマホでは横幅がないので、レスポンシブ対応でテーブルの表示を工夫する必要があります。





世の中には、レスポンシブ対応のサンプルがありますが、どれも今一つで分かりにくものばかりです。多くは以下のような感じですね。

横2列以上 複数カラムあるテーブル レスポンシブ対応


これだと、2つのTDのどちらが横カラムの何に該当するか分かりません。できれば横カラムの項目名を出したいものです。仮にカラム数が増えて4つなどになるともう訳が分かりません。



そこで、少し改良を加えて項目名を表示できるようにしてみました。



td:nth-of-type(2):before でcontentを設定して、TDの前に項目名を設定するのですが、contentの値をCSSで固定で記述してしまうと汎用性がありません。attrにてHTMLの値を取得して設定するようにしております。



CSSは一度設定したら修正する必要がないように、HTMLの調整だけで動的に対応できるようにしました。おそらく、これが一番汎用性が高いのではないかと思います。



横幅が480pxより小さくなると、ヘッダーの項目が非表示になり、TDの中に項目名が表示されます。

横2列以上 複数カラムあるテーブル レスポンシブ対応


table.tbl_content {
 border-collapse: collapse;
 width: 95%;
}
table.tbl_content th, table.tbl_content td {
 padding: 10px;
 border: 1px solid #999;
}
table.tbl_content th {
 background-color: #f5f5f5;
 text-align: center;
 width: 30%;
 font:#333333;
}
@media screen and (max-width: 480px) {
 table.tbl_content { border-top: 1px solid #999; }
 table.tbl_content thead { display:none; }
 table.tbl_content tr {
  display:block;
  margin-bottom: 0px;
 }
 table.tbl_content th {
  display: block;
  width: 100%;
  font:#333333;
 }
 table.tbl_content td {
  display: block;
  text-align: left;
  width: 97%;
  margin-left: 3%;
  padding: 13px;
 }
 table.tbl_content td:nth-of-type(1):before { 
  font-weight:bold;
  content: attr(sub1)"";
  white-space: pre;
 }
 table.tbl_content td:nth-of-type(2):before { 
  font-weight:bold;
  content: attr(sub2)"";
  white-space: pre;
 }
}
CSSの記述




<table class="tbl_content">
<thead>
<tr>
<th></th>
<th>フルーツ</th>
<th>野菜</th>
</tr>
</thead>
<tbody>
<tr>
<th>黄色い食べ物</th>
<td sub1="フルーツ:">バナナ</td>
<td sub2="野菜:">パプリカ</td>
</tr>
<tr>
<th>赤い食べ物</th>
<td sub1="フルーツ:">リンゴ</td>
<td sub2="野菜:">苺</td>
</tr>
</tbody>
</table>
HTMLの記述




以下、縦2レコード、横2カラムの表のレスポンシブ対応した結果のデモです。PCとスマホで見比べてみてください。PCでブラウザのサイズを変更しても構いません。



フルーツ 野菜
黄色い食べ物 バナナ パプリカ
赤い食べ物 リンゴ
スポンサーリンク
スポンサーリンク

ブログ村

にほんブログ村 地域生活(街) 中国地方ブログ 広島(市)情報へ
スポンサーリンク