title: How to make this table only 1 pixel border?
body: <p>I have this table:</p>
  
  <p><img src="https://i.imgur.com/OQqug.png" alt="image oftable"></p>
  
  <p>With the following code:</p>
  
  <pre><code>    &lt;table border="1" id="comparativa"&gt;
          &lt;tr&gt;
              &lt;td rowspan="2"&gt;&lt;/td&gt;
              &lt;td colspan="3" class="friuty"&gt;Fruity&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="lila"&gt;Intensed&lt;/td&gt;
              &lt;td class="lila"&gt;Medium&lt;/td&gt;
              &lt;td class="lila"&gt;Low&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="lila"&gt;Green&lt;/td&gt;
              &lt;td&gt;&lt;img src="img/forsutpeque.png" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;img src="img/donapeque.png" alt="" /&gt;&lt;/td&gt;
              &lt;td&gt;-&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="lila"&gt;Mellow&lt;/td&gt;
              &lt;td&gt;-&lt;/td&gt;
              &lt;td&gt;&lt;img src="img/marpeque.png" alt="" /&gt;&lt;/td&gt;
              &lt;td&gt;-&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="lila"&gt;Balanced&lt;/td&gt;
              &lt;td&gt;-&lt;/td&gt;
              &lt;td&gt;&lt;img src="img/cotxepeque.png" alt="" /&gt;&lt;/td&gt;
              &lt;td&gt;-&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>and the following CSS</p>
  
  <pre><code>#comparativa { 
      width:350px; 
      font-size:1.2em; 
      border-spacing:0px; 
      border-collapse:separate; 
      empty-cells:hide !important; 
      border:0; 
  }
  #comparativa tr td { 
      padding:2px 4px; 
      border:#9f4dc2 solid 1px; 
      text-align:center; 
      width:88px; 
      color:#bdac77; 
  }
  #comparativa tr td.friuty { 
      background:#9f4dc2; 
      color:#fff; 
      text-transform:uppercase; 
  }
  #comparativa tr td.lila { 
      background:#ecdff3; 
      text-transform:uppercase;  
      color:#9f4dc2; 
      text-align:left; 
      padding-top:2px; 
      padding-bottom:4px; 
      padding-left:10px; 
  }
  </code></pre>
  
  <p>I want to make it's inner borders 1px width while still keeping the empty top-left cell without showing the borders:</p>
  
  <p>The problem is that if I put <code>border-collapse:collapse</code> then the top-left row appears with its border, even with the empty-cells:hide...</p>
  
  <p>Any suggestion?</p>