【CSS/HTML】表をパソコンやスマホ画面ではみ出る場合の対処法(幅設定、overflow設定)


ブログやホームページで表は本当に頭にくると思います

HTMLやCSSの記述が非常に面倒だからです

特に、今はパソコンとスマホ、タブレットの

レスポンシブ対応が見やすさの観点から重要となっているため

余計、神経を逆なでします

そこで、簡単なやり方で

こうやると90%はこれでいいかなと思えるやり方について

ここでは見ていきたいと思います

表のプロパティ(設定)で幅を100%にする

幅を100%にするが一番簡単だと思います

これは、横幅を見える画面に応じて

100%表示してくださいという設定です

ですので、

パソコン画面であろうと

タブレット画面であろうと

スマホ画面であろうと

横幅100%表示がそこでされます

下の表は横幅100%で作成した表です

水性成分油性成分界面活性剤
・・・・・・・・・・・・
グリセリン・・・・・・・・・・・・
クエン酸ナトリウム・・・・・・・・・・・・
XXXX・・・・・・・・・・・・
XXXX・・・・・・・・・・・・

スクロール設定をする

これはCSSで

overflowの設定をするということになります

overflow設定とは

画面からはみ出てしまう部分に対して

  • 見えるようにするか
  • 隠してしまうか
  • スクロールすると見えるようにするか
  • はみ出た部分の処理はブラウザにお任せするか

の四択です

基本は、スクロールすることになり

四番目のブラウザにお任せするを選んでも

スクロール設定が自動でなされることになります

かりにすべてのdiv構文にoverflow設定をする場合は

div {overflow: auto;}

だけで十分です

すると、画面からはみ出す場合は

スクロールバーが登場しますので

そこを操作すれば隠れている部分が見えます


シェアする

  • このエントリーをはてなブックマークに追加

フォローする