Set Table cellspacing color
<p>I have a table overlays on top an image <em>as its background image</em>. </p>

<p>I want to set the <strong>cellspacing color to white</strong> so that the columns looks separated. </p>

<p>However I could not o set the <code>&lt;table&gt;</code> background color because it affects the <code>&lt;td&gt;</code> background color too in which I want it to stay transparent. </p>

<p>Each of the <code>&lt;td&gt;</code> has its own border color as well, hence I could not tweak with its border color to white. </p>

<pre><code>&lt;div id="container"&gt;
  &lt;img id="mybackgroundimage" /&gt;
  &lt;table id="table"&gt;
    &lt;tr&gt;
      &lt;td class="green"&gt;&lt;/td&gt;
      &lt;td class="green"&gt;&lt;/td&gt;
      &lt;td class="red"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="red"&gt;&lt;/td&gt;
      &lt;td class="green"&gt;&lt;/td&gt;
      &lt;td class="red"&gt;&lt;/td&gt;
    &lt;/tr&gt;
 &lt;/table&gt;
&lt;/div&gt;




        #container{
            position: relative;
        }

        #table {
            border-spacing: 2px;
            position: absolute;
            top: 0;
        }

           #table td.green {
               border-color: green;
           }

           #table td.red {
               border-color: red;
           }
</code></pre>

<p>Anyone could advise? </p>