cssでtdタグにmin-heightと同様の機能をいれてみた

2024年2月20日

tableタグを使用してカレンダーを構築している際に、気になることがありました。
それはTDタグの高さが足りないということです。

カレンダーの場合、TDタグにある程度の高さがないとカレンダーっぽくありません。
ただ、スケジュール等も表示させる場合高さを固定するわけにはいかないため、height指定はできません。

そこで、min-heightで高さの初期値を指定しようと思いました。
ところが、TDタグはmin-heightが反映されませんでした。
min-widthは反映されるのになぜ？
と思いましたが、代替案をググって調べて対応しました。

今回何とかしたいこと。

TDタグの高さをデフォルト指定し、見栄えを整えます。

TDタグにmin-heightは反映されない

高さは可変にしたいけれど、最小高さを指定したいのだから、min-heightを指定すればよいと思いました。

ところが、実際に指定してみるとmin-heightが反映されませんでした。
ググって原因を調べてみたところ、どうやら「仕様」ということでした。

min-widthは反映されたので、何かしらの理由でtdタグはmin-heightを無効にしているようです。
その理由までは調べきれませんでした。

とはいえ何とかする方法を探しました。

min-heightの代わりにtdタグに次のスタイルシートを指定したら、min-heightと同じようになりました。

:beforeをblock指定し、高さを設定することでデフォルトの高さを実現しています。
td本体とは別の部分で高さ指定しているため、これならば高さの変動にも対応できます。

目的は達成できたので、これでOKなのですが、一つ疑問を感じました。

:beforeのfloat:left;って必要なの？

blockに高さを指定すればそれでよいのではないか？
float:left;はいらないのではないか？

そう思いさっそくfloat:left;抜きで試してみたところ、次のようになりました。

TDの上部に余白ができてしまいました。
float:left;指定することで、min-heightと同じ働きを実現していることがわかりました。

不要そうで意外と重要な記述でした。

色々調べて試してみると、知識になるものです。