晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

はてなブログ)スマホ等でページ横からはみ出たテーブルを横スクロールできるようにする最も(?)簡単な方法。

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

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

ネットでよく見られる方法は、<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