同じコードなのにテーブルの横幅が何故か微妙にズレるページがある問題
スポンサーリンク

同じデザインのはずなのに…。

表(テーブル)を使ったページを何個も作っていて、長年疑問に思っていたことがあるんだけど、幅の設定などが全く同じなのにページを見比べていくとテーブルの横幅が変わっていく時がある。

具体的にはこのページ
https://www.umanarok.net/uriage/2020/january.html

同じコードの同じ表を使っているのに3月で1回ズレて、4月でまた元に戻る。

ずーっと気持ち悪かったんだけど、特に困ることもないし、ちょっと考えてもわからなかったので対処していなかったのだけど、或る日突然閃いた結果が物凄く単純だった。

犯人はサイドに鎮座していた

その犯人(ホシ)とは横に出てくるスクロールバー

ずれる

謎は全て解けた

1月や2月が1ページで完結していたのに対して3月は長いので横にスクロールバーが出てくる。
その分だけブラウザの幅が縮まるのでズレていたというわけ。
なんと単純なトリックなんや(・ε・;)

個人的には謎が解けただけで対処しなかったけど、どうしても微妙にズレるのが気になる場合はスクロールバーを常時表示させるようにすれば対応可能。

対応したい場合はスタイルシートに記述

CSSを開いて

html {
 overflow-y: scroll;
}

と記述すれば必要のないページでも常時スクロールバーが出てくるようになる。

スポンサーリンク
おすすめの記事