【縦並び】tableのレスポンシブ・スマホ対応のcssデザイン・作成

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

現在はWordPressは他の方法で運用しています。詳しくはこちらの記事をみくてださい。Webアプリではこれに近いことをやっているため覚書程度に残しておきます。

【グーテンベルク時代は?】Tablepressからexcel(csv)、google spreadsheetに乗り換え

駄文ブロガーとしてデビューしたのち、個人的にテーブルの管理方法がいろいろと切り替わりました。その歴史を振り返っておきます。大昔はTablePressというWordPressのプラグインを使っていました。201４年ぐらいまでですねレスポンシブ

1 レスポンシブ・スマホ対応のcssのtableのデザイン・作成 | 「横スクロール」ではなく「縦」
2 ステップ1:テーブルの作成
3 ステップ2:display: block;で縦並び、data-labelの擬似要素で置き換え
4 ステップ3:横に項目名をつける
5 テーブルで列幅を均等に固定にする

レスポンシブ・スマホ対応のcssのtableのデザイン・作成 | 「横スクロール」ではなく「縦」

スマホで閲覧したとき、そのままにしておくと「はみ出る」という問題に直面します。

デザインは「横スクロール」はui的に格好悪いと思うので、一定の幅になったら「縦」になる方法で作成しています。「横スクロール」は視線が散漫になるというか。。

コピペは学びがないと思うので、一応、段階的に作りかたを解説してみます。

ステップ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: #644D37;
  color: #fff;
  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:横に項目名をつける

このままだと縦横のテーブルではありません。項目Aを追加します。

	見出しセル1	見出しセル2
項目A	データセル1	データセル2

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

項目Aにはdata-labelをつけません。項目の量はいくつになるかわかりませんから、ひっくり返して縦長に設定するわけですね。

td:first-child {
  background: #f2f2f2;
  font-weight: bold;
}

項目Aに色をつけるコードです。擬似クラスの:first-childは最初の子要素にスタイルを適用するコードです。

@media screen and (max-width: 480px) {
  table td:first-child {
    background: #644D37;
    color: #fff;
    font-weight: bold;
    text-align: center;
  }
}

項目Aが縦になったとき、色をつけるコードです。

横の見出しは塗り分ける場合はどうしましょう。擬似要素を使っているため、1つのセルになっています。

背景色を2色で分割する方法としてlinear-gradientがあります。

@media screen and (max-width: 480px) {
  table td {
    display: block;
    text-align: right;
    background:linear-gradient(90deg,#f2f2f2 0%,#f2f2f2 35%,#fff 35%,#fff 100%);
  }
}

セルが別れているわけではないため、文字が長い場合、色に浸透してしまいます。

ちょっと強引な気もしましたので、もっとよい方法があれば知りたいですね。

テーブルで列幅を均等に固定にする

おまけです。通常、均等ではありません。

.table {
  table-layout: fixed;
}