晴歩雨描

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

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

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

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

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

↓ スクロールバーが付いたテーブルのイメージ(パソコン)。

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

f:id:art2nd:20190212141216j:plain