Web

overflow:hidden が指定された領域内に、幅の大きい table (表) を記述する

投稿日:2019年1月10日 更新日:

1. はじめに

本ウェブサイトは、スマートフォンのサイズだと 1カラムのレイアウトになるのですが、その際、画面全体を表す HTML要素のスタイルに、「overflow:hidden」が指定されるようになっています(WordPress で使っているテーマでそうなっています)。この指定は「はみ出た部分は表示しない」という意味です。

このような状況で、記事の中に <table>タグを使って何か表を作り、その中身が画面幅に収まらない場合、表のはみ出た部分が見られなくなってしまいます。

例えば、こんな表です。

スマートフォンではみ出たところが見えない表
環境変数
HOMEPATH \Users\{ユーザー名}
PATH C:\Windows\System32\;C:\Windows\;C:\Windows\System32\Wbem;{各プログラムのパス}
USERNAME {ユーザー名}
USERPROFILE C:\Users\{ユーザー名}
WINDIR C:\WINDOWS

スマートフォンで本ページを見た場合、この表は画面からはみ出てしまい(横方向)、そのはみ出た部分は見られなくなっているのではないでしょうか。

2. 対応策

このような場合は、<table>タグを、<div style="overflow:auto;"> というタグで囲んでみましょう。
これにより、はみ出した部分は横スクロールで見られるようになります。

<div style="overflow:auto;">
  <table>
  (省略します)
  </table>
</div>

先程の表に、この対応を行ったのが以下です。見た目は変わりませんが、スマートフォンでアクセスすると横スクロールができるようになっています。

スマートフォンではみ出ても横スクロールできる表
環境変数
HOMEPATH \Users\{ユーザー名}
PATH C:\Windows\System32\;C:\Windows\;C:\Windows\System32\Wbem;{各プログラムのパス}
USERNAME {ユーザー名}
USERPROFILE C:\Users\{ユーザー名}
WINDIR C:\WINDOWS
スマートフォンで見たところ
スマートフォンで見たところ

3. おわりに

ブログを書くだけでも、いろいろと問題が起きるものです。
1つ1つ丁寧に解決していきましょう。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Google

Google マップ (Google Maps) で緯度経度を指定して場所を見つける方法

例えば「北緯35度40分57秒 東経139度45分10秒」という情報があった場合に、それがどこなのか調べるには Google マップ を利用することができます。では、どうやればよいのでしょうか? 実は …

Web

CSP と CORS の違い

CSP と CORS の違いをざっと確認するためのページです。

DokuWiki

DokuWiki が最新版なのに upgrade now! が表示される場合の対処法

目次1. DokuWiki が最新版なのに upgrade now! が表示される2. 対処方法その13. 対処方法その24. おわりに参考 1. DokuWiki が最新版なのに upgrade n …

Web

Notification API のポイント解説

目次1. はじめにNotification API が行うこと補足2. Notification API の使い方(1) デスクトップ通知が許可されているかどうかを取得する。(2) ユーザーにデスクト …

Web

sizes属性のデフォルト値は 100vw である

sizes属性のデフォルト値は 100vw です。