2020/03/17

cssでレスポンシブなtableをつくる方法

cssでディスプレイの幅に応じてtableのレイアウトをレスポンシブに変える

サイト内のtableのレイアウトをパソコンでの表示とスマートフォンでの表示とで切り替えたい時など、ディスプレイの幅に応じてtableのレイアウトを適切に表示させたいときがあると思います。
そんなときに利用できる方法として、レスポンシブwebデザインでディスプレイの幅が変化した時に、cssを利用してtableのレイアウトを変更する方法を紹介します。
例として、下の表のように会社概要の表組みのレイアウトを切り替えたい時の記述例を紹介します。

パソコンでの表示	スマートフォンでの表示

htmlの記述例

<div class="about">
		<table>
			<tr>
				<th>会社名</th>
				<td>〇〇〇〇株式会社</td>
			</tr>
			<tr>
				<th>代表</th>
				<td>〇〇〇〇</td>
			</tr>
			<tr>
				<th>所在地</th>
				<td>〒000-0000<br>
					福岡県福岡市博多区〇〇〇</td>
			</tr>
			<tr>
				<th> TEL</th>
				<td>000-000-0000</td>
			</tr>
			<tr>
				<th>事業内容</th>
				<td>〇〇〇〇の〇〇〇〇<br>
					〇〇〇〇の〇〇〇〇<br>
					〇〇〇〇の〇〇〇〇</td>
			</tr>
		</table>
	</div>

cssの記述例（レイアウトに関係しない部分は省略しています）

.about th, .about td {
  border: 1px solid #333;
  padding: 10px;
}

@media (max-width: 599px) {
  .about th, .about td {
    display: block;
    width: 100%;
  }

  .about td {
    border-top: none;
    border-bottom: none;
  }

  .about tr:last-child > td {
    border-bottom: 1px solid #333;
  }
}