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と同じようになりました。
td:before
{
content: "";
display: block;
height: 80px;
float: left;
}
:beforeをblock指定し、高さを設定することでデフォルトの高さを実現しています。
td本体とは別の部分で高さ指定しているため、これならば高さの変動にも対応できます。
目的は達成できたので、これでOKなのですが、一つ疑問を感じました。
:beforeのfloat:left;って必要なの？
blockに高さを指定すればそれでよいのではないか？
float:left;はいらないのではないか？
そう思いさっそくfloat:left;抜きで試してみたところ、次のようになりました。
TDの上部に余白ができてしまいました。
float:left;指定することで、min-heightと同じ働きを実現していることがわかりました。
不要そうで意外と重要な記述でした。
色々調べて試してみると、知識になるものです。