cssのdisplay: block;と擬似要素でレスポンシブ・スマホ対応のtableを作成する

シェアする

program003

先日、tableが使いたくなり、今更ながら、スマホにも対応できるレスポンティブテーブルを調べてみました。一応、段階的に作りかたを解説してみます。

ステップ1:テーブルの作成

まず、ただのテーブルを作成します。

見出しセル 見出しセル
データセル データセル

htmlです。

<table>
<tr>
<th>見出しセル</th>
<th>見出しセル</th>
</tr>
<tr>
<td>データセル</td>
<td>データセル</td>
</tr>
</table>

cssです。

table {
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  border-collapse: collapse;
}
table th,
table td {
  border-left: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 10px;
}
table th {
  background-color: #eee;
  text-align: left;
}

ここまでは解説はいらない気がしますが、右上は1箇所だけ線をひいて、あとは各々の左下に線をひいていきます。

border-collapse: collapse;はあまりにテーブルを使わないので忘れていました。。隣接する境界線を結合して表示します。特に塗りを指定する場合、塗りと線がぴったりとあいます。

スポンサーリンク

電子書籍のおすすめ比較

ステップ2:display: block;で縦並び、data-labelの擬似要素で置き換え

(スクリーンショット後ほど追加します。)

見出しセル1 見出しセル2
データセル1 データセル2

htmlです。

<table>
<thead>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="見出しセル1">データセル1</td>
<td data-label="見出しセル2">データセル2</td>
</tr>
</tbody>
</table>

theadとtbodyをセットで追加しました。data-labelも追加しました。cssでtheadを消去して、代わりにdata-labelでテキストを表示します。

cssです。

/* レスポンティブ対応のテーブル */
table {
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  border-collapse: collapse;
  width: 100%;
}
table th,
table td {
  border-left: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 10px;
}
table th {
  background-color: #eee;
  text-align: left;
}
@media screen and (max-width: 480px) {
  table thead {
    display: none;
  }
  table td {
    display: block;
    text-align: right;
  }
  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

ひとつひとつわけて解説します。

display: block;

で縦に並べます。

見出しを消すため、theadとtbodyをhtmlに追加したので、

table thead {
  display: none;
}

で見出しを消します。その代わりにcontent: attr(data-label);を追加して1つのセルに擬似要素で表示させます。

わかりやすくするため、width: 100%;で幅を広げて、片方は右にtext-align: right;、片方は左にfloat: left;して完了です。細かいとところやサイズはお好みでお願いします。

スポンサーリンク

参考サイト3選

参考になったサイトです。こちらのコードを参考にして、適当に段階的な解説をいれてみました。

英語のサイトです。

We recently overhauled our payment statement tables for mobile web in Merchant Center. Our goal was to meet the following requirements: No …

日本語ならこちらもわかりやすいです。

レスポンシブデザインでも使えるtableを使った表組のサンプルコード3種類。CSSだけで実装でき、シンプルで応用しやすいものを集めました。

こちらに3つの方法の紹介がありましたが、1番目の方法は縦長になりすぎるため却下。3番目のスクロールは個人的に見にくいです。というわけで2番目の方法を採用することにして実装していきます。

レスポンシブWebデザインで狭いスクリーンサイズの時にテーブルをどう見せるかは悩ましい問題のひとつです。その対応方法を幾つか調べてみました。...

こちらも昔みたとき、参考になったサイトです。まとまっています。

おかげさまでわりと簡単に実装できました。

スポンサーリンク

シェアする

フォローする

スポンサーリンク