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

Webページ中の特定の文字列をURLで指定する(Text Fragments)

Webページ中の特定の文字列をURLで指定する Text Fragments について説明します。

Web Security

SSLで使用する証明書運用の不便さ

上のどちらも、SSLの証明書が期限を過ぎてしまったことが原因で起きた問題のようです。 前者は詳しく見ていないので分かりませんが、後者はサーバー証明書ではなくデバイス側に保存されているクライアント証明書 …

HTML

HTML におけるコメントの書き方

HTML におけるコメントの書き方について説明します。 目次1. コメントとは?2. HTML におけるコメントの記述テキストの制限3. 仕様書 1. コメントとは? まず、「コメント」というのは、「 …

Chrome

Chrome 78 デベロッパーツールの新機能

Chrome 78 のデベロッパーツールにおいて、主な新機能を紹介します。

ICTリテラシー

無料レンタルサーバーとDokuWiki で作る自分用情報サイト

本サイトに パソコン内に自分専用の情報データベースをつくる というページがあります。詳細はリンク先を見て頂くとして、本ページではこれに関連して、「自分専用の情報サイトを作る」ためのオススメの方法につい …