tableと他要素の幅が小数点以下切り捨てのせいで揃わない時の対処法

tableの横幅をパーセントで指定し、同じ横幅のdiv要素を下に並べたとき、微妙に横幅が揃わないことがあります。

ずれる原因は、ブラウザによってtableのサイズが小数点以下で切り捨てられてしまうため。

（例）スマホのとき、横幅92%指定
…tableは380px、divは380.88pxになる

borderを指定していると、特にそのズレが目立ってしまうので修正・・・

tableを使わないのも方法の一つですが、今回はtableを使いたかったのでdivにCSSを追加しました。

対処法

divにdisplay:tableを指定する

div {
	display: table;
}

ちょっと強引ですが、divも小数点以下が切り捨てられるようにしちゃおう！という感じです。

ChromeやEdgeでズレていたのは上記の記述のみで解決しました。

tableと他の要素がくっついていて、かつ背景色や線がある場合のみ気になってくるズレなので、必要なときだけ対処しましょう。