テーブルと言っても、ここでは表のことですよ。
ぼくはF1関連の投稿で表をよく使っていますが、スマホで見たり、PCでもブラウザの幅を狭めていくと右側が見切れてしまい、閲覧することができません。実はつい最近気がつきました。(ダメじゃん
そこで、これをちょこっとだけ改善してみました。
改善と言っても大したことはしていません。以下のように、テーブルの記述に2行書き加えただけです。(赤文字が追加した部分)
<div style="overflow-x: auto;">
<table>
…
</table>
</div>
この「overflow」プロパティ、いろいろ応用が利くようです。
・overflow-x:scroll:テーブル下にスクロールバー表示
・overflow-y:scroll:テーブル横にスクロールバー表示
・overflow:scroll:テーブル横・下にスクロールバー表示
・overflow-x:auto:テーブル幅が小さくなると下にスクロールバー表示
・overflow-y:auto:テーブル高さが小さくなると横にスクロールバー表示
・overflow:auto:テーブルサイズが小さくなると横・下にスクロールバー表示
このほかに、visible(内容がはみ出て表示される)やhidden(はみ出た部分は表示されない)といった指定ができるようです。
まぁ、本格的にやるならプラグインを入れるなり、cssに書き込むなりで手がけることになるとは思うのですが、とりあえずの対策として手を入れてみました。いずれは「タイトル行固定」とか「タイトル列固定」なんてのも試してみたいと思います。