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

2020.10.30　Posted by Coding_team

Webプログラミング

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

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

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

①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>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

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

.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>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

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

.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>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>XXXXXXXXX</td>

<td>YYYYYYYYY</td>

<td>ZZZZZZZZZ</td>

<td>XXXXXXXXX</td>

<td>YYYYYYYYY</td>

<td>ZZZZZZZZZ</td>

</tr>

<tr>

<td>XXXXXXXXX</td>

<td>YYYYYYYYY</td>

<td>ZZZZZZZZZ</td>

<td>XXXXXXXXX</td>

<td>YYYYYYYYY</td>

<td>ZZZZZZZZZ</td>

</tr>

<tr>

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

.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