レスポンシブでテーブルを使うときの便利なCSS

カテゴリー：ホームページ制作

最近、レスポンシブでのサイト制作が主流になってきていますね。
また、既存のPCサイトをレスポンシブ化して欲しい。というご要望も少なくないと思います。
そんな時に困るのが、テーブルの表示です。

今回は、そんなテーブルコーディング部分をスマホで見た場合にリスト風表示に変換できるCSSをご紹介します。
jQueryも不要！CSSだけで、できます！

まずは、コピペで！

CSS

.ResTableA{
	width:100%;
	border-collapse: collapse;
	border-spacing: 0;
	border: 1px solid #d8d8d8;
}

.ResTableA th{
	-moz-box-sizing: border-box;     /* box-size[border・padding 込み] */
	box-sizing: border-box;     /* box-size[border・padding 込み] */
	border: 1px solid #d8d8d8;
	padding: 15px 10px 12px;
	width: 30%;
	font-style: normal;
	font-weight: bold;
	text-align: center;
	vertical-align:middle;
	background-color: #f0f0ef;
}

.ResTableA td{
	padding: 15px 10px 12px;
	text-align: left;
	vertical-align: top;
	border-top: dotted 1px #d8d8d8;
}

@media (max-width: 479px){
.ResTableA{
	border-bottom:none;
}
.ResTableA th{
	padding: 5px 10px;
	width:100%;
	display:block;
	margin: 0 auto;
	border:none;
	text-align: left;
}
.ResTableA td{
	padding: 5px 10px;
	width:100%;
	display: list-item;     /* リストに変換 */
	list-style:none;     /* リストに変換によるドットを非表示 */
	border-top: none !important;
	border-bottom:1px solid #d8d8d8;
}
}

ブレイクポイントは、一般的なスマホの横幅（320px〜479px）の最大値に設定しています。
つまり、縦位置表示で、リスト風に。横位置表示では、PCと同様のテーブル表示になります。

続いてHTMLです。

HTML

<table class="ResTableA">
<tr>
<th>社名</th>
<td>株式会社 ◯◯◯◯</td>
</tr>
<tr>
<th>代表取締役</th>
<td>◯◯ ◯◯</td>
</tr>
<tr>
<th>所在地</th>
<td>◯◯◯◯◯◯◯◯</td>
</tr>
</table>

これだけで、テーブルをレスポンシブ化できます。
CSSの「display: list-item;」というのが、キーポイントです。
あとは、それぞれ、お好みで装飾してください。

DEMO