大阪/梅田のホームページ制作会社 ウェブラボ関西オフィス

スタッフブログ

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

2020/10/30 技術Memo
テーブルのレスポンシブ対応について考えよう

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

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

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

まとめ

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

ホームページ制作実績

大阪/梅田を拠点に、京都・奈良・滋賀・兵庫など関西圏はもちろん、 日本全国、さまざまな業種のお客様のホームページを制作しています。

制作実績一覧はこちらから

私たちについて

私たちはお客様の会社のホームページ担当として、 以下のポリシーをもってホームページ制作を行います。

少数精鋭。常に最高のチーム体制で制作します

少数精鋭。
常に最高のチーム体制で制作します

100人のお客様に100通りのプランをご提案します

100人のお客様に
100通りのプランをご提案します

常に正直に、誠実に。きちんとNOとお伝えします

常に正直に、誠実に。
きちんとNOとお伝えします

お客様の「お客様」の視点を大事にします

お客様の「お客様」の
視点を大事にします

格好いい、キレイなだけのデザインはしません

格好いい、キレイなだけの
デザインはしません

「+1」のクリエイティブにとことんこだわります

「+1」のクリエイティブに
とことんこだわります

詳しくはこちらから

スタッフブログ TOP