tableでレスポンシブでカラム落ちさせたらwidth:100%;なのに右に飛び出てしまう。

2020年2月29日



tableでレスポンシブでカラム落ちさせたらwidth:100%;なのに右に飛び出てしまう。

そもそもはtable内でカラムを落とそうと思って調べたら、落としたい要素をwidth:100%;にすればいいってことだったんだけど、
落ちたけど、右が飛び出てるやんってことで、イライラしてました。

飛び出てる要素に、box-sizing:border-box; つけたら飛び出なくなります。

下のソースの

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

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

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


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

スポンサードサーチ

右に飛び出る原因

はpadding:15px;です。
box-sizing:border-box;があるとpadding:15px;が内側に行きます。
box-sizing:border-box;がないと、width100% + 15pxって考え方になります。