マンガでわかるホームページ作成

CSS セレクタでtable・tdを指定するときの注意

tableやtdをCSSセレクタで指定してるのにちゃんと効いていない?というときの注意点について解説します。

結論

tbodyを忘れない

table>tbody>tr>td

解説

以下のようなtableを作ったとします。

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

table内のtdを指定するとき、以下のように指定するとtd内にあるtableのtdにもpaddingがかかってしまいます。

table td{padding:5px;}

以下のように「>」を指定すると子孫要素ではなく子要素に指定できます。tableとtdの間にはtrがあるのでこれも はさんでいます。

table>tr>td

しかし実際は効きません。

理由は、ブラウザ側で(勝手に)tbodyを追加しているからです。

↓以下のtableをDevToolsでみるとtableの子要素にtbodyがあります。

td td

可能であればさらにhtmlソースを見てみてください(Ctrl+U)

こちらにはtbodyなどありません。

最終的にはブラウザの解釈に従うしかありませんので、tbodyを追加し以下のように指定すれば解決です。

table>tbody>tr>td

ちなみにtheadというタグもあります。

これは1行目がすべてthの場合に発生することがあります。

thのときは要注意です。

まとめ

tableを作ると自動でtbodyが追加される。

セレクタでtableを指定するときはtbodyを忘れないように気を付けよう。

関連記事