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

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

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

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

ebookbrain.net

レスポンシブ・スマホ対応の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の擬似要素で置き換え

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を追加します。

<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;
}