title: How do I alternate column background colours in a table?
body: <p>This sounds pretty simple, but I cant find many posts about it.</p>
  
  <p>Basically I want the first column red, 2nd green, 3rd red etc...</p>
  
  <p>How can I do this in css?</p>
  
  <p>Here is my html code (I am using bootstrap 3):</p>
  
  <pre><code>        &lt;table class="table table-striped"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Welsh&lt;/th&gt;
                      &lt;th&gt;English&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Shwmae &lt;a href="#" onclick="playAudio('shwmae');"&gt;&lt;span class="glyphicon glyphicon-volume-up play"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/td&gt;
                      &lt;td&gt;Hello&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Bore da &lt;a href="#" onclick="playAudio('boreda');"&gt;&lt;span class="glyphicon glyphicon-volume-up play"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/td&gt;
                      &lt;td&gt;Good morning&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>I have tried using the following CSS, but it didn't do anything:</p>
  
  <pre><code>col:first-child {background: #FF0}
  col:nth-child(2n+3) {background: #CCC}
  </code></pre>