title: How to make table borders invisible with CSS
body: <p>I know this is an oft asked question, but I've tried some of the solutions (such as <a href="https://stackoverflow.com/questions/2124099/how-to-make-separating-lines-borders-in-a-table-disappear-with-css">How to make separating lines/borders in a table disappear with CSS?</a>) but I still can't quite get it.</p>
  
  <p>I have defined via css a table structure with alternating row colors. I'd like the (in particular vertical) borders between teh cells to be invisible and so suppose I either need a zero td border width, or the alternating td border colors to be the same as the background colors.</p>
  
  <p>Example below is what I've tried, in calling a table1 id from html, I get a nice alternating colored row table but with obvious cell borders still - appreciate your help.</p>
  
  <pre class="lang-css prettyprint-override"><code>#table1 table, tr, td, th {
       border: 0;
  }
  
  #table1 tbody tr:nth-child(odd) {
       background-color: #A3B9D2; 
  }
  
  #table1 tbody tr:nth-child(even) {
       background-color: #E7EDF3;
  }
  </code></pre>
  
  <p>and then sample html;</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table id="table1" &gt;
     &lt;tr&gt;
       &lt;td&gt;Test&lt;/td&gt;&lt;td&gt;(value)&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;Test2&lt;/td&gt;&lt;td&gt;(value2)&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>