tableでレスポンシブでカラム落ちさせたらwidth:100%;なのに右にはみでる

2020年9月18日

スポンサードサーチ

【問題】tableでレスポンシブでカラム落ちさせたらwidth:100%;なのに右にはみでる

そもそも、

レスポンシブ対応のためにtable内でカラムを落とそうと思って調べたら、落としたい要素をwidth:100%;にすればいいってことだったんだけど、

カラム落ちしたけど、右にはみでるやんってことで、イライラしてました。

 

【原因】tableでレスポンシブさせたら右にはみでる原因

原因は、padding:15px;

この書き方がダメだったんです。

なんでこの書き方がダメなのか、理由は次です。

 

 

スポンサードサーチ

【解決策】tableレスポンシブはみでる防止策(CSSの書き方)

解決策は、box-sizing:border-box;

こいつをつけることで、ばっちり解決できますよ。

考え方

box-sizing:border-box;があるとpadding:15px;が内側に収まります。
box-sizing:border-box;がないと、width100% + 15pxが外側にはみでるのです。(下のソースが、触れるので触ってみてください)

はみでる要素に、box-sizing:border-box; つけたらはみでることはなくなりましたので、

下のソースの

/*box-sizing:border-box;*/

のコメントアウト外して、使ってみてください。

See the Pen
VJZdxZ
by spooky (@tupeono10)
on CodePen.



0.5+とか0.25+とか切り替えてみてみてください。

 

tableレスポンシブで右にはみでる話の【まとめ】

 

table内の要素(スマホ表示でカラムを落として、尚且つ綺麗に表示したい)に

box-sizing:border-box;

を効かせるといこと、そして、

box-sizing:border-box;は、

パディングと境界線はボックスの内側に置かれる

マージンは外側にはみでます。

 

以上です。