スマートフォン等の幅狭の画面で、ホームページ上のテーブルを見る場合、列数が多かったり、縦横にセルが結合されていたりすると、非常に見にくいものです。
これを何とかしたいと思い、方法を考えてみました。

HTMLのサンプル

まず例として氏名、性別、出身、血液型、年齢の2行5列のテーブルを2つ作ります。
ただし、1つ目のテーブルpconlyは性別の列について、セル結合を使って作成します。
1つ目のテーブルに続いて、2つ目のテーブルmobileonlyをセル結合を使わず作成します。
<table id="pconly">

	<tr>

		<th>田中太郎</th>

		<td rowspan="2">性別:♂</td>

		<td>長崎県出身</td>

		<td>血液型:A型</td>

		<td>23歳</td>

	</tr>

	<tr>

		<th>佐藤次郎</th>

		<td>兵庫県出身</td>

		<td>血液型:O型</td>

		<td>37歳</td>

	</tr>

</table>

<table id="mobileonly">

	<tr>

		<th>田中太郎</th>

		<td>性別:♂</td>

		<td>長崎県出身</td>

		<td>血液型:A型</td>

		<td>23歳</td>

	</tr>

	<tr>

		<th>佐藤次郎</th>

		<td>性別:♂</td>

		<td>兵庫県出身</td>

		<td>血液型:O型</td>

		<td>37歳</td>

	</tr>

</table>

CSSのサンプル

次にCSSを記述します。
まずパソコン等の広い画面ではテーブルpconlyを表示させ、テーブルmobileonlyは非表示とするように記述します。
さらにスマートフォン画面ではテーブルpconlyを非表示とし、テーブルmobileonlyは表示するように記述します。
table {

	width: 100%;

	border-right: 1px solid #999999;

	border-bottom: 1px solid #999999;

	border-spacing: 0;

	border-collapse: separate;

}

th,

td {

	padding: 3px 2px;

	border-top: 1px solid #999999;

	border-left: 1px solid #999999;

}

#mobileonly {

	display: none;

}

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

	#pconly {

		display: none;

	}

	#mobileonly {

		border: none;

		display: table;

	}

	#mobileonly th {

		background-color: yellow;

	}

	tr {

		display:block;

		margin-bottom: 30px;

	}

	th {

		display: block;

		border: 1px solid #999999;

	}

	td {

		display: list-item;

		width: 90%;

		margin-left: 10%;

		border: none;

	}

}
この方法のデメリットはコードが冗長になることと、検索エンジンにほぼ同じ内容のテーブルが収集されてしまうことですね。