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

2020/10/30 技術Memo

HTMLには、テーブル（表）を作成するためのTABLEタグがありますよね。
テーブルをPCで見る場合は、大抵ウィンドウに十分な幅があったり、ブラウザの幅をある程度まで縮めた場合に画面全体が横スクロールできるようになったりするため、テーブル自体が伸縮することはあまりありません（デザインによっては伸縮するものは勿論あります）。

対してスマートフォンの場合は画面幅が狭いため、画面からはみ出してしまったり、わずか数文字で折り返されてしまうこともあり、非常に見にくくなってしまいます。
今回は、テーブルをレスポンシブ対応するための工夫をご紹介します。

①PCと同じレイアウトにする
②1行表示にする
- 行見出しがある場合
- 列見出しもある場合
③横スクロールを付ける
まとめ

①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ライブラリを使用すれば、横スクロールができることを示すアニメーションを表示することができます。

まとめ

必要な情報が載っているはずのテーブルが見づらいと感じてしまうと、ユーザーがページを離脱する確率が上がってしまいます。
メリット・デメリットを考慮したうえで、最も見やすいと思えるレイアウトを採用するようにしましょう。