スマートフォンなど幅を超えるテーブル要素にスクロールを付ける

スマートフォンなど幅を超えるテーブル要素にスクロールを付ける方法をご紹介します。

※ 表の組み方によっては適切な表現にならない場合があります。

サンプルデモ

Header	Header	Header
A	B	C
A	B	C
A	B	C
A	B	C

サンプルコード

HTML

CSS

table {
									border-collapse:collapse;
									border-spacing:0;
								}

table thead th,
									table tbody td {
										border:1px solid #ccc;
										padding:10px;
									}

table thead th {
										background-color:#ccc;
										text-align:left;
									}

table tbody td {
										background-color:#f9f9f9;
									}

@media only screen and (max-device-width:767px) {
									table {
										display:block;
										overflow-x:scroll;
										border-left:1px solid #ccc;
										border-right:1px solid #ccc;
									}

table thead {
											display:none;
										}

table tbody {
											display:table;
											width:700px;
										}

table tbody tr:first-child td {
												border-top-width:5px;
											}

table tbody tr td:first-child {
												border-left:none;
											}

table tbody tr td:last-child {
												border-right:none;
											}
								}