みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSS テーブルタグの二列目にそれぞれ色を付けたい

http://takuya-1st.hatenablog.jp/entry/2013/12/05/035607
これを参考にやってみましたが、何も反映されませんでした。
ややこしくてうまくいけませんでした。

テーブルタグ
<table>
<tr>
<td>A</td>
<td>赤</td>
</tr>
<tr>
<td>B</td>
<td>白</td>
</tr>
<tr>
<td>C</td>
<td>黄</td>
</tr>
</table>

どうすれば良いか、教えてください。
よろしくお願いします。

投稿日時 - 2019-01-18 17:26:04

QNo.9579001

困ってます

質問者が選んだベストアンサー

<style>
/* 2段目の左側(正確には偶数ライン) */
tr:nth-child(even) td:nth-child(1) {
color:red;
}
/* 2段目の右側(正確には偶数ライン) */
tr:nth-child(even) td:nth-child(2) {
color:green;
}
</style>

<table>
<tr>
<td>A</td>
<td>赤</td>
</tr>
<tr>
<td>B</td>
<td>白</td>
</tr>
<tr>
<td>C</td>
<td>黄</td>
</tr>
</table>
普通に動きますよ。
この手の質問の場合は、書いてみたCSSも貼ってみると
原因がわかりやすくて楽ですよ。
今回「偶数ライン」で有効なCSSを書いておきましたが、
2ライン目限定なら、evenを2にすれば、2ライン目「のみ」になります。
それでは

投稿日時 - 2019-01-18 19:43:05

お礼

ありがとうございます。
おかげさまでうまくいけました。

投稿日時 - 2019-01-19 12:28:52

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問