【HTML/css】tableの高さ小数点以下が切り捨てられる？

最終更新日：2019/04/10

ラムネグから一言：寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.

tableの高さ切り捨て問題

HTMLでtableを使ったとき、それからcssでdisplay:tableとしたとき、そのオブジェクトの高さ小数点以下が切り捨てられている気がします。

Chromeだけの問題かもしれませんが、このあいだtableの中の要素がほんのすこしはみだす現象にぶつかったので調べてみるとtableの高さが切り捨てられているからでした。

なんでtableだけ小数点以下の高さが切り捨てられるのか、それからこの問題への根本的な解決は今もわかりません（cssマスターの方、よろしければ下記Messageよりご教授ください）が、対策をいくつか紹介しておきますね。

tableの中の要素がはみ出すといっても、1pxにも満たないちいさなはみだし。ふつうだと気にならないレベルです。

でもtableの中の要素（例えばtdに背景色をつけた時とか）にtable自体のボーダーとかぶさって、ボーダーがみえなくなったりします。

なのでまずtableの中の要素に背景色やボーダーをつけるのをやめる、というのが一つ目の対策です。

そもそもこの現象はtableの中身の高さが小数点以下だと発生するので、tableの中身の高さを「〇〇px」と決め打ちすると発生しなくなります。

こんなことになったのは、tableの中、そしてtdの中にinputを入れていたのがそもそもの原因。

Chromeのuser agent stylesheetってinputのfont-sizeが13.3333pxにされちゃうんですよね。

さらに、わたしはcssでpaddingやmarginを指定するとき、あんまりpxを使わず、だいたいフォントのサイズを基準にする「em」という単位を使っています。

そうするとinputのpaddingやmarginは13.333pxを基準に計算されるようになり、結果としてtableの中身であるinput、それからその親要素であるtdの高さがめちゃくちゃ小数点だらけの数字になってしまうんです。

そしてtable自体は高さの小数点以下がなぜか切り捨てられるから、中身の方がほんの少し（0.~px分）大きくなっちゃうんですね。

user agent stylesheetはChromeが勝手に決めているものなんですが、なんでこんなに中途半端な値にしたのか気になる所です。整数だったらこんなことにならなかったハズ。

今回はHTML/cssでtableの高さが小数点以下切り捨てされてしまう現象を紹介しました。

残念ながら根本的な対策、なんでtableだと小数点以下が切り捨てられるのかはわかりませんでしたが、小手先の対策を2つ書かせてもらいました。

詳しい方よかったら教えてください！

【おしらせ、というか完全なる宣伝】

文体がもうぜんぜん適当すぎてあれだけどものすごい自由に書いてるブログ「檸檬だくだく」もよろしく.寝る前に読める恐ろしくくだらないやつです.