どうも7noteです。テーブルを作っていて、trにCSSが効かない時に確認すること

tableのtrにはいくつかうまく反映されないCSSがあります。

とくに幅やbordreなどボックスに関連するCSS効かないので注意！

tr要素にも効くCSS

効く・・・というよりも、継承されて効いているってものが多そうです。

【フォント系】

color
font-size
font-weight
font-family

【テキスト系】

text-align
line-height
letter-spacing

【背景系】

background

tr要素には効かないCSS

【ボックス系】

width
height
margin
padding
border

trに効かないCSSがあるのはなぜ?

そういう仕様・・・というしかないのですが、あくまで私のイメージで考察してみました。

tr自体は表組みの1行を示す時に使われるタグで、tr要素の実体はどこにもありません。

つまり、実体のないモノに横幅を指定しても効かないし、borderを引こうにもなにもないところに線は引けない。
中にtd要素などを持ってはいますが、あくまでtrの役割は1行の意味だけなのでtr自身に対して直接なにかしようとしても効かないということなのかなと思います。

ただこれでいうとbackgroundだけは効くので何かが違うのかも・・・

初心者の方がコーディングする際は無理にtrに余白をとるのではなく、thやtd、もしくはtable要素自体にCSSを書くようにしましょう。
そして、trはCSSが効かないもの。と覚えてしまったほうが楽かもしれません。覚えることが多いと思うので、tr要素にCSSを書かなくても済むような組み方ができるようになっておいたほうがのちのち楽かもしれません。好みはあるかもですが。