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

メールアドレスが公開されることはありません。

関連記事

Web

Screen Wake Lock API を使って、ディスプレイをスリープさせないWebページを作る

Screen Wake Lock API を使ったサンプルページを作りました。

Chrome

Chrome 78 の新機能

ome 78 の新機能について簡単に説明します。

DokuWiki

DokuWiki で閲覧専用ユーザーを作る手順

DokuWiki において、閲覧専用ユーザーを作成する手順を紹介します。 目次DokuWiki で、閲覧専用ユーザーを作成する手順1. 閲覧専用グループを追加する。2. ユーザーにグループを指定するお …

Web

Material の Icons (アイコン)を導入する手順

2020年8月:Material design icons 側に変更があり、手順が変わってしまったようです。 目次1. はじめに2. Icons の導入手順2-1. Google Web Fonts …

Web

Mastodon(OStatus) を参考にして、理想の標準情報発信プラットフォームを考えてみました

話題の Mastodon を参考にして、私の理想とする情報発信プラットフォームについて考えてみました。 Mastodonとは? 見た目は、Twitterとほとんど同じサービスです。しかし、Twitte …