解決済み

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

  • 困ってます
  • 質問No.9579001
  • 閲覧数85
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 56% (175/310)

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>

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

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

  • 回答No.1

ベストアンサー率 50% (1228/2420)

コンピューター カテゴリマスター
<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ライン目「のみ」になります。
それでは
お礼コメント
nkmyr

お礼率 56% (175/310)

ありがとうございます。
おかげさまでうまくいけました。
投稿日時 - 2019-01-19 12:28:52
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


OKWAVE若者応援スペシャル企画

ピックアップ

ページ先頭へ