テーブルのレスポンシブ対応について考えよう

HTMLには、テーブル(表)を作成するためのTABLEタグがありますよね。
テーブルをPCで見る場合は、大抵ウィンドウに十分な幅があったり、ブラウザの幅をある程度まで縮めた場合に画面全体が横スクロールできるようになったりするため、テーブル自体が伸縮することはあまりありません(デザインによっては伸縮するものは勿論あります)。
対してスマートフォンの場合は画面幅が狭いため、画面からはみ出してしまったり、わずか数文字で折り返されてしまうこともあり、非常に見にくくなってしまいます。
今回は、テーブルをレスポンシブ対応するための工夫をご紹介します。
①PCと同じレイアウトにする

テーブルの行数、列数、文字数によっては、PCと同じレイアウトでも問題なく表示される場合があります。そういった場合は特別な対応をする必要はありません。
工夫するとすれば、テーブル内のpaddingをPCより控えめにすることで、1行あたりの文字数を増やすことができます。
最近は画面の大きなスマホも増えてきていますが、iPhone5/SEの画面サイズ(320px×568px)で確認しておくと、他の端末でも問題なく表示されるでしょう。
②1行表示にする
テーブルの列数を1行にして、セルを1行ずつ表示させます。この方法だとセル一つ一つで、十分な幅が取れるメリットがあります。ただし行数が増えるので、ボリュームによっては非常に縦長のページになってしまうのがデメリットです。
1行表示にする方法は以下の通りです。
行見出しがある場合

行見出し→内容→内容→行見出し→…といった順番で1行ずつ並びます。
<table class="row_table">
<tbody>
<tr>
<th>AAA</th>
<td>XXX</td>
<td>YYY</td>
</tr>
<tr>
<th>BBB</th>
<td>XXX</td>
<td>YYY</td>
</tr>
<tr>
<th>CCC</th>
<td>XXX</td>
<td>YYY</td>
</tr>
</tbody>
</table>
.row_table,
.row_table td,
.row_table th {
border: 1px solid #cbced2;
border-collapse: collapse;
text-align: center;
}
.row_table th {
background: #01214d;
color: #fff;
padding: 4px 12px;
display: block;
width: 100%
}
.row_table td {
background: #f5f6f8;
padding: 4px 12px;
display: block;
width: 100%;
}
SAMPLE
AAA | XXX | YYY |
---|---|---|
BBB | XXX | YYY |
CCC | XXX | YYY |
thとtdにdisplay:block;とwidth:100%;を入れることで1行にしています。
列見出しもある場合

行見出し→列見出し:内容→列見出し:内容→行見出し→行見出し→…といった順番で1行ずつ並びます。
列見出しが内容と同じセルの頭に表示されるのがポイントです。
<table class="column_table">
<thead>
<tr>
<th> </th>
<th>aaa</th>
<th>bbb</th>
</tr>
</thead>
<tbody>
<tr>
<th>AAA</th>
<td data-title="aaa">XXX</td>
<td data-title="aaa">YYY</td>
</tr>
<tr>
<th>BBB</th>
<td data-title="bbb">XXX</td>
<td data-title="bbb">YYY</td>
</tr>
<tr>
<th>CCC</th>
<td data-title="ccc">XXX</td>
<td data-title="ccc">YYY</td>
</tr>
</tbody>
</table>
.column_table,
.column_table td,
.column_table th {
border: 1px solid #cbced2;
border-collapse: collapse;
text-align: center;
}
.column_table thead th {
display: none;
}
.column_table tbody th {
background: #01214d;
color: #fff;
padding: 4px 12px;
display: block;
width: 100%
}
.column_table td {
background: #f5f6f8;
padding: 4px 12px;
display: block;
width: 100%
}
.column_table td[data-title]::before {
color: #666;
content: attr(data-title) " :";
font-weight: bold;
padding: 0 10px 0 0;
display: inline;
}
SAMPLE
aaa | bbb | |
---|---|---|
AAA | XXX | YYY |
BBB | XXX | YYY |
CCC | XXX | YYY |
thとtdにdisplay:block;とwidth:100%;を入れて1行表示にする方法は、行見出しのみの時と同じです。
さらに列見出しを表示する方法として、疑似要素を使っています(疑似要素について分からない人は【CSS】疑似要素について知ろうをご覧ください)。
content: attr(data-title) ” :”;を使って、HTMLのtdタグに記述したdata-titleに、コロンを付けて表示させることができます。
疑似要素はdisplay:inlineにすることでインライン要素にしています。
本来の列見出し(thead内のth)は不要になるので、display:none;で非表示にします。
③横スクロールを付ける

テーブルのみ横スクロールを適用させることで、行や列の多いテーブルや、結合を使用している複雑なテーブルでもPCと同じ配置で表示させることが出来ます。
ユーザーの手で操作する必要があるコンテンツになるので、テーブル付近に「横スクロールできます」等のアナウンスがあると親切ですね。
実装方法は以下の通りです。
<div class="wrap_scroll_table">
<table class="scroll_table">
<thead>
<tr>
<th> </th>
<th>aaa</th>
<th>bbb</th>
<th>ccc</th>
<th>ddd</th>
<th>eee</th>
<th>fff</th>
</tr>
</thead>
<tbody>
<tr>
<th>AAA</th>
<td>XXXXXXXXX</td>
<td>YYYYYYYYY</td>
<td>ZZZZZZZZZ</td>
<td>XXXXXXXXX</td>
<td>YYYYYYYYY</td>
<td>ZZZZZZZZZ</td>
</tr>
<tr>
<th>BBB</th>
<td>XXXXXXXXX</td>
<td>YYYYYYYYY</td>
<td>ZZZZZZZZZ</td>
<td>XXXXXXXXX</td>
<td>YYYYYYYYY</td>
<td>ZZZZZZZZZ</td>
</tr>
<tr>
<th>CCC</th>
<td>XXXXXXXXX</td>
<td>YYYYYYYYY</td>
<td>ZZZZZZZZZ</td>
<td>XXXXXXXXX</td>
<td>YYYYYYYYY</td>
<td>ZZZZZZZZZ</td>
</tr>
</tbody>
</table>
</div>
<p class="txt">※横スクロールできます</p>
.table-responsive .wrap_scroll_table {
width: 400px;
overflow-x: scroll;
margin: 0 auto;
}
.table-responsive .scroll_table {
margin-top: 10px;
max-width: 400px;
margin: 0 auto;
}
.table-responsive .scroll_table,
.table-responsive .scroll_table td,
.table-responsive .scroll_table th {
border: 1px solid #cbced2;
border-collapse: collapse;
text-align: center;
}
.table-responsive .scroll_table th {
background: #01214d;
color: #fff;
padding: 4px 12px;
}
.table-responsive .scroll_table td {
background: #f5f6f8;
padding: 4px 12px;
}
.table-responsive .txt {
width: 400px;
margin: 0 auto;
font-size: 14px;
font-size: 1.4rem;
margin-top: 2px;
}
SAMPLE
aaa | bbb | ccc | ddd | eee | fff | |
---|---|---|---|---|---|---|
AAA | XXXXXXXXX | YYYYYYYYY | ZZZZZZZZZ | XXXXXXXXX | YYYYYYYYY | ZZZZZZZZZ |
BBB | XXXXXXXXX | YYYYYYYYY | ZZZZZZZZZ | XXXXXXXXX | YYYYYYYYY | ZZZZZZZZZ |
CCC | XXXXXXXXX | YYYYYYYYY | ZZZZZZZZZ | XXXXXXXXX | YYYYYYYYY | ZZZZZZZZZ |
※横スクロールできます
また、「ScrollHint」などのJSライブラリを使用すれば、横スクロールができることを示すアニメーションを表示することができます。
まとめ
必要な情報が載っているはずのテーブルが見づらいと感じてしまうと、ユーザーがページを離脱する確率が上がってしまいます。
メリット・デメリットを考慮したうえで、最も見やすいと思えるレイアウトを採用するようにしましょう。