はてなブログ）スマホ等でページ横からはみ出た表<table>を横スクロールできるようにする最も（？）簡単な方法。

はてなブログをスマホで閲覧する場合、テーブルが横にはみ出てしまうことがある。レスポンシブ対応含め一般的なデザインテーマでは横スクロールできない。

これを、横スクロールできるようにする最も（？）簡単な方法。

ネットでよく見られる方法は、<table>を<div>で囲ってclass名を付けて、cssでoverflow-x:scroll;を指定する方法。

<div class="table-scroll">
<table>
...
</table>
</div>
----- CSS -----
@media (max-width: 640px) {
	.table-scroll {
		overflow-x: scroll;
	}
}

これでも悪くないかもしれないが、はてなブログではデザインのカスタマイズでcssを編集する必要がある。

max-widthでスマホなど画面の横幅が一定サイズ以下の時のみスクロールできるようにしているが、overflow-xをscrollでなくautoにすれば、テーブルが画面からはみ出た時のみスクロールバーが付くので、max-widthの指定は不要になる。この方法なら、横幅がかなり広いテーブルであれば、パソコン画面でも自動的にスクロールバーが付く。

ということで、手っ取り早いのは、<div>に直接以下のようなstyleを指定する。

<div style="overflow-x:auto;">
<table>
...
</table>
</div>

↓ 以下にサンプル。

スマホでは、スクロールバーが付くのではなく、テーブルを直接ドラッグでスクロールできるようになる。

Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample
Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample
Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample
Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample
Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample