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 Vitals

LCP を意識した Highlight.js の読み込み方

LCP を意識した Highlight.js の読み込み方について説明します。

no image

ドメインに関して気を付けること

目次TLS証明書ドメインの乗っ取り1. TLS証明書が発行されてしまうとまずい2. メールアドレスが利用されてしまう TLS証明書 証明書の期限を短くする。 ドメインの乗っ取り 1. TLS証明書が発 …

Web

HSTS が原因で、ウェブサイトが勝手にhttps接続しないようにする

HSTSが原因で、サイトが勝手にhttps接続されないようにする方法について説明します。

DokuWiki

DokuWiki: Layout Switcher Plugin

DokuWiki用プラグイン「Layout Switcher Plugin」のページです。 目次1. 概要2. インストールと設定(1) プラグインファイルのダウンロード(2) プラグインをサーバーに …

Web

YouTube でコメントが表示されないときの対処法

YouTube でコメントが表示されないときの対処法を紹介します。