【CSS】tableの最初の行,最後の行,最初の列,最後の列の指定方法

「一番目の行を指定したいけどtrにいちいちclassをつけるのメンドウ」

「列ってどうやって指定すればいいの？」

tableの最初の行、最後の行、最初の列、最後の列の指定方法を解説します。

【最初の行】tr:first-child>*

ヘッダー	ヘッダー	ヘッダー	ヘッダー	ヘッダー
ヘッダー	セル	セル	セル	セル
ヘッダー	セル	セル	セル	セル
ヘッダー	セル	セル	セル	セル

【最後の行】tr:last-child>*

ヘッダー	ヘッダー	ヘッダー	ヘッダー	ヘッダー
ヘッダー	セル	セル	セル	セル
ヘッダー	セル	セル	セル	セル
ヘッダー	セル	セル	セル	セル

【最初の列】tr>*:first-child

ヘッダー	ヘッダー	ヘッダー	ヘッダー	ヘッダー
ヘッダー	セル	セル	セル	セル
ヘッダー	セル	セル	セル	セル
ヘッダー	セル	セル	セル	セル

【最後の列】tr>*:last-child

ヘッダー	ヘッダー	ヘッダー	ヘッダー	ヘッダー
ヘッダー	セル	セル	セル	セル
ヘッダー	セル	セル	セル	セル
ヘッダー	セル	セル	セル	セル

ポイント解説

最初は「:first-child」、最後は「:last-child」

CSSはclassを使って特定の要素を指定できますが、すべての要素にいちいちclassをつけるのはメンドウです。

そんなときは疑似クラスを使います。

「:first-child」は兄弟要素の最初（一番目）を指定する疑似クラスです。

同様に「:last-child」は兄弟要素の最後を指定できます。

行はtr、列はtd

trはtable内で行を囲うhtmlタグです。

「tr:first-child」と指定すると「最初のtr」であり、最初の行ということになります。

「td:first-child」と指定すると「最初がtdなら」ということになり、最初の列を指定できます。

ただし、最初がthなら指定されないため「th:first-child」も指定する必要があります。

trにCSSを指定しない

trには効かないCSSが多いため、trには指定せずtdまたはthにCSSを指定しましょう。

よって最初の行の指定は「tr:first-child td,tr:first-child th」となります。

「tdまたはth」は「tr>*」で指定できる

trの子要素にはtdかthしかありません。

よってtrの子要素を指定すればtdとthを指定したことになります。

「>」は子要素を指定するセレクタ記号です。孫要素以降は含みません。

よって「tr>*」でtdとthを指定できます。

最初の行の指定は「tr:first-child>*」と省略できます。

【まとめ】tableの最初,最後の行,列の指定方法

• 【最初の行】tr:first-child>*
• 【最後の行】tr:last-child>*
• 【最初の列】tr>*:first-child
• 【最後の列】tr>*:last-child

ポイント

• 最初は「:first-child」、最後は「:last-child」
• 行はtr、列はtd
• trにCSSを指定しない
• 「tdまたはth」は「tr>*」で指定できる

以上、tableの最初の行、最後の行、最初の列、最後の列の指定方法でした。