如何替換表格中的列背景顏色？

Question

這聽起來很簡單，但我無法找到關於它的許多帖子。

基本上我想的第一列紅，綠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} 

Answer 1

你會需要指出列加入了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; 
} 

存在

CODEPEN DEMO

Answer 2

你會使用tr:nth-child。 Mozilla Docs.

例子：

tbody tr:nth-child(2n+1) { 
    ⋮ declarations 
} 
tbody tr:nth-child(odd) { 
    ⋮ declarations 
}