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

これを何とかしたいと思い、方法を考えてみました。

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