3

これは非常に単純に聞こえますが、それに関する多くの投稿を見つけることができません。

基本的には、最初の列の赤、2番目の緑、3番目の赤などが必要です...

cssでこれを行うにはどうすればよいですか?

これが私のhtmlコードです(私はブートストラップ3を使用しています):

        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Welsh</th>
                    <th>English</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Shwmae <a href="#" onclick="playAudio('shwmae');"><span class="glyphicon glyphicon-volume-up play"></span></a></td>
                    <td>Hello</td>
                </tr>
                <tr>
                    <td>Bore da <a href="#" onclick="playAudio('boreda');"><span class="glyphicon glyphicon-volume-up play"></span></a></td>
                    <td>Good morning</td>
                </tr>
                <tr>
            </tbody>
        </table>

次のCSSを使用してみましたが、何もしませんでした:

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}
4

2 に答える 2

5

colgroup を追加して、が存在することを示す必要があります

HTML

<table>
    <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <tr>
    <th>Descrizione</th>
    <th>Convenzione</th>
    <th>Privato</th>
  </tr>

  <tr>
    <td>Tomografia computerizzata delle arcate dentarie</td>
    <td>€ 36,15</td>
    <td>€ 100,00</td>
  </tr>

  <tr>
    <td>Tomografia computerizzata delle arcate dentarie</td>
    <td>€ 36,15</td>
    <td>€ 100,00</td>
  </tr>

  <tr>
    <td>Tomografia computerizzata delle arcate dentarie</td>
    <td>€ 36,15</td>
    <td>€ 100,00</td>
  </tr>

  <tr>
    <td>Tomografia computerizzata delle arcate dentarie</td>
    <td>€ 36,15</td>
    <td>€ 100,00</td>
  </tr>
  <tr>
    <td>Tomografia computerizzata delle arcate dentarie</td>
    <td>€ 36,15</td>
    <td>€ 100,00</td>
  </tr>

  <tr>
    <td>Tomografia computerizzata delle arcate dentarie</td>
    <td>€ 36,15</td>
    <td>€ 100,00</td>
  </tr>  
</table>

CSS

col:nth-child(odd) {
  background:red;
}

col:nth-child(even) {
  background:green;
}

コードペンデモ

于 2013-10-24T10:51:21.710 に答える
0

を使用しますtr:nth-childMozilla ドキュメント。

例:

tbody tr:nth-child(2n+1) {
  ⋮ declarations
}
tbody tr:nth-child(odd) {
  ⋮ declarations
}
于 2013-10-24T10:41:31.063 に答える