Webページにテーブルデータを表示させる時に、PCブラウザの画面いっぱい表示するようなエクセル画面を、「スマホ対応してくれ」と言われて困った経験のあるWebエンジニアは多いでしょう。
できれば、TableマトリクスデータをCSSのみを使って表示を切り替えたいというのが、その後の不具合も発生しずらい為、少し拘って考えてみたいと思います。
Bootstrapでの対応
レスポンシブと言えば、Bootstrapを使う人も多いと思いますが、Bootstrapでのレスポンシブ対応は、主に以下の３つです。
セル内の文字改行
セルの横幅縮小
テーブル全体の横スクロール対応
Always responsive | Bootstrap
classに"table-responsive"を付与するだけですが、レスポンシブって言っていいのか？というレベルです。
↓↓↓↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="table-responsive">
<table class="table table-bordered" style="min-width:500px;">
<thead>
<tr>
<th>#</th>
<th>項目</th>
<th>値</th>
<th>備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>会議費</td>
<td>20,000</td>
<td>プロジェクト打ち合わせ飲食代</td>
</tr>
<tr>
<td>2</td>
<td>旅費交通費</td>
<td>8,400</td>
<td>打ち合わせ会場までの交通費</td>
</tr>
<tr>
<td>3</td>
<td>備品費</td>
<td>50,000</td>
<td>プロジェクトで使用する機材購入費</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
セルをブロック化
tableのセルを"display:block;"にするとどうなるでしょう？
積み木を積み上げたような感じになりました。
縦の連動が無くなるので、tableとしてのマトリクス表示の機能はなく成りますね。
ちなみに、この場合のCSSは以下のとおりです。
.table-replace tr{
display:block;
min-height:50px;
}
.table-replace td{
display:inline-block;
top:10px;
left:10px;
}
縦並びバージョン
上記のヘッダをなくして、データだけ縦並びにしたのが以下のバージョンです。
スマホ表示としては、悪くないですが、見出しが無くなるというのは、非常に分かりにくい状態になります。
さらに、見出しも擬似要素でつけると、ピポッドテーブルのような見え方になります。（実際は縦一列に並ぶのでピポッドテーブルとは違います）
少しデザインにこだわり、見出しの幅を整えるとこんな感じ。
いかがでしょう？この時のCSSは以下です。
.table-replace thead{
display:none;
}
.table-replace tr{
display:block;
min-height:50px;
border:3px solid #CCC;
}
.table-replace td{
display:block;
top:10px;
left:10px;
}
.table-replace tbody > tr > td:nth-child(n):before{
display:inline-block;
width:50px;
text-align:center;
border-right:2px solid #DDD;
margin-right:8px;
}
.table-replace tbody > tr > td:nth-child(1):before{
content:"#";
}
.table-replace tbody > tr > td:nth-child(2):before{
content:"項目";
}
.table-replace tbody > tr > td:nth-child(3):before{
content:"値";
}
.table-replace tbody > tr > td:nth-child(4):before{
content:"備考";
}
まとめ
Tableデータを小さなスマートフォンの画面で見やすく表示するという方法は、さまざまなアプローチと、見る側の複数の要望があるので、一概に「これが正解」というものはありませんが、
スマートフォンの特性である、片手で持って、縦スクロールのみで、必要な情報を閲覧することができるという見せ方は、追求した方がいいと思われます。
この先に開発側で便利に行うためには、こうしたCSSを確定した後に、サイト内のtableデータで画面横サイズをオーバーしているものに関しては、自動でCSSが付与されるようにすることで、何も気にせずレスポンシブができるようになります。
この記事を読んだ人から、要望が多数あれば、今後時間が出来た時に、ライブラリを作って公開しますので、ご要望くださいませ。
