td・tr・tbodyにclassを指定してもCSSが効かない原因

tableは表をつくるためのhtmlタグです。tableとセットでtd・tr・tbodyも使います。

しかし、td・tr・tbodyはCSSを使うには注意が必要です。

td・tr・tbodyにclassを指定してもCSSが効かない原因を解説します。

tdのCSSが効かない

【症状】table直下のtdが効かない

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

<table class="example">
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

CSSは下記のように指定したとします。

table.example>tr>td

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

【原因】tbodyが追加されるから

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

以下のようになっています。

<table class="example">
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

【解決】tbodyを挟む

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

table.example>tbody>tr>td

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

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

thのときは要注意です。

tr,tbodyにはCSSを指定しない

tr,tbodyにCSSが効かない理由としてはtr,tbodyそのものに効かないCSSがあるためです。

ここでは何が効く、何が効かないとは言いません。

tr,tbodyにはCSSを指定せず、table,tdにCSSを指定するようにしましょう。

classの指定ミス

td・tr・tbodyだからといってclassが効かないということはありません。

よってclassの指定のしかたを間違えている可能性があります。

下記記事を参考にミスがないか見直してみてください。

まとめ

tableを作ると自動でtbodyが追加されるため下記のようにtbodyを挟む。

table.example>tbody>tr>td

セレクタで「>」を使ってtdを指定するときはtbodyを忘れないように気を付けよう。