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

製作 プログラム

2019/04/10(水)

ラムネグから一言:無料アプリを3つ作りました。記事下部にリンクがあるので見てみてくださいね。さっそくみてみる

tableの高さ切り捨て問題

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

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

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

対策①:tableの中身に背景を設定しない

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

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

なのでまず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つ書かせてもらいました。

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

【どどん!】ラムネグではただいまアプリを絶賛提供中!さあ、選べる3つの無料アプリ!あなたはどれにする?

【わたガチャ】

あなただけのガチャを作ろう♪

すたーと!

【みんガチャ】

みんなで一つのガチャを作りあげよう♪

すたーと!

【litty-リティ】

秘密のメッセージをフォロワーさんに送っちゃおう!

すたーと!