html - 如何交替表格中的列背景颜色？

Question

这听起来很简单，但我找不到很多关于它的帖子。

基本上我想要第一列红色，第二列绿色，第三列红色等......

我如何在 css 中做到这一点？

这是我的 html 代码(我使用的是 bootstrap 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

您需要通过添加列组来表明列存在

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