table レイアウトを PC とモバイルで見え方を変更する CSS（table レスポンシブ）

ウェブページやブログ記事で、なんだかんだ使用頻度の高い「table」を使った表レイアウトですが、PC とモバイルで見た目を変えた方が親切かもしれません。

例えば、セルが2つ並びの table レイアウトは、PC で見た時には横並びのほうが見やすいですが、モバイル表示をした場合、横並びにすると、ひとつひとつのセルが詰まってしまって、大変見づらくなってしまいます。

▼▼ 横並びだと、この様にセルが詰まって読みづらくなってしまいます。

▼▼ しかし、セルが縦並びになればどうでしょう？

このようにひとつひとつのセルが大変見やすくなります。

今回は「table セルのレイアウトを PC では横並び、モバイルでは縦並びになるように見た目を自動的に変更する方法」を紹介します。

これは CSS だけで簡単に設定できます。

table セルのレイアウトを PC とモバイルで変更する手順
デモページを用意しました
あとがき

table セルのレイアウトを PC とモバイルで変更する手順

メディアクエリを付加して簡単な CSS を施すだけ

table セルのレイアウトを PC とモバイルで変更する方法はとても簡単です。

もともとのテーブルレイアウト CSS があって、それにモバイルレイアウト用の CSS をメディアクエリを追加してあげるだけです。

@media screen and (max-width: 640px) {

}

@media screen and (max-width: 640px) {

}

このメディアクエリは「640px まではこの CSS レイアウトを優先的に使用してね～」という記述をしいます。

このメディアクエリの間に、

display: block;

1	display: block;

を入れるだけで table セルのレイアウトが PC とモバイルで違ったものになります。

以下、ちゃんと記述した CSS を掲載します。

@media screen and (max-width: 640px) {
	.table-mobile {
	  width: 100%;
	}
	.table-mobile th,
	.table-mobile td {
		width: auto;
		display: block;
		text-align: center;
	}
}

@media screen and (max-width: 640px) {

.table-mobile {

width: 100%;

}

.table-mobile th,

.table-mobile td {

width: auto;

display: block;

text-align: center;

}

こんな感じで、th と td のスタイルに「display: block;」を追加するだけで、モバイルで見た時には縦並びになるように設定できます。

デモページを用意しました

table レイアウト（レスポンシブ）のデモ

table セルのレイアウトを PC とモバイルで変更しているデモを用意しました。

▼▼ table セルのレイアウト PC 版だと以下のように横並びになり、

PC 版だとセルは横並び

▼▼ モバイル版だと、以下のように縦並びに切り替わります。

モバイル版のセルは縦並び

デモページは以下のリンクボタンから閲覧できます。

DEMO ページはこちら

デモページの HTML と CSS コード

HTML コード

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    
    <title>Document</title>
    
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <h1>テーブルレスポンシブ</h1>

  <table class="table-mobile">
    <tr>
      <th>セル見出し</th>
      <td>PC やタブレットで見た時とスマホで見たときではテーブルのレイアウトが変更されます。</td>
    </tr>
    <tr>
      <th>セル見出し</th>
      <td>モバイルで見た時には、右セルが上になり、左セルが下になります。</td>
    </tr>
    <tr>
      <th>セル見出し</th>
      <td>ここにテキストが入ります。</td>
    </tr>
    <tr>
      <th>セル見出し</th>
      <td>ここにテキストが入ります。</td>
    </tr>
    <tr>
      <th>セル見出し</th>
      <td>ここにテキストが入ります。</td>
    </tr>
    <tr>
      <th>セル見出し</th>
      <td>ここにテキストが入ります。</td>
    </tr>
    <tr>
      <th>セル見出し</th>
      <td>ここにテキストが入ります。</td>
    </tr>
  </table>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>テーブルレスポンシブ</h1>

<tr>

<th>セル見出し</th>

<td>PC やタブレットで見た時とスマホで見たときではテーブルのレイアウトが変更されます。</td>

</tr>

<tr>

<th>セル見出し</th>

<td>モバイルで見た時には、右セルが上になり、左セルが下になります。</td>

</tr>

<tr>

<th>セル見出し</th>

<td>ここにテキストが入ります。</td>

</tr>

<tr>

<th>セル見出し</th>

<td>ここにテキストが入ります。</td>

</tr>

<tr>

<th>セル見出し</th>

<td>ここにテキストが入ります。</td>

</tr>

<tr>

<th>セル見出し</th>

<td>ここにテキストが入ります。</td>

</tr>

<tr>

<th>セル見出し</th>

<td>ここにテキストが入ります。</td>

</tr>

</table>

</body>

</html>

CSS コード

table {
	margin:0 auto 50px;
	padding: 0;
	border-collapse: collapse;
	border-bottom: #dddddd 1px solid;
	width: 640px;
}

th {
	padding: 12px 20px;
	background-color: #F5f5f5;
	border: #dddddd 1px solid;
	vertical-align: middle;
	width: 30%;
}

td {
	padding: 12px 15px;
	border: #dddddd 1px solid;
	vertical-align: middle;
}

@media screen and (max-width: 640px) {
	.table-mobile {
	  width: 100%;
	}
	.table-mobile th,
	.table-mobile td {
		width: auto;
		border-bottom: none;
		display: block;
		text-align: center;
	}
	.table-mobile td {
		text-align: left;
	}
}