tableでレスポンシブでカラム落ちさせたらwidth:100%;なのに右にはみでる
スポンサードサーチ
タップできる目次
【問題】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;は、
パディングと境界線はボックスの内側に置かれる
マージンは外側にはみでます。
以上です。