title: Set Table cellspacing color
body: <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>