たびたび、あ、そうだった…となること
tableを使うとき、例えば行ごとに横線を入れたいとします
そのとき
tr td{
border-bottom:1px solid #ccc
}としますが、これだと一番上のセルの上側だけ線がないことになります
しかし
tr td{
border-bottom:1px solid #ccc;
border-top:1px solid #ccc
}こうしてborder-bottomとborder-topを同時に入れると重なって太線になってしまうので
一番上の行のセルに対してだけborder-topを入れたい
そこでfirst-childを使おう、となるわけですが
結論から書くと
thに対してのfirst-child
tr th:first-child{
border-top:1px solid #ccc;
}tdに対してのfirst-child
tr:first-child td{
border-top:1px solid #ccc;
}ポイントは
td:first-child ← ×
tr:first-child td ← 〇
となるところ
tdにはfirst-childとlast-childを直接設定することはできないようです
1行を表すtrと見出しセルであるthは１行に１つ、と決まっているのに対し、tdは、いくつあるかがその時によって違うからということなのかと思いました しかしうっかりやってしまいあれ？となるのでメモします
コメント