title: Remove border and space between <td>, but keep between <tr> and 2 columns (each of 3 cells)
body: <p>I have a table with 6 columns and want 3 on both sides to have no border and space between the cells, so at then end having 2 columns with 3 cells on each side.</p>
  
  <p>To keep the border between the rows I let <code>border-collapse:separate</code> and only set border-spacing horizontal to 0px.</p>
  
  <p>But now the two columns with 3 cells on each side also have 0px spacing between them, but what I want them to be 2px (the same spacing as between the rows). 
  Setting border-spacing back to 2px results in a small gap within the top and bottom border line. </p>
  
  <p>I assume my complete approach with the border-collapse doesn't help me to get the layout I want to.</p>
  
  <p>Any ideas? Here's the fiddle: <a href="http://jsfiddle.net/m2kh6p88/1/" rel="nofollow noreferrer">Link</a></p>
  
  <pre><code>&lt;fieldset&gt;
  &lt;legend&gt;content 1&lt;/legend&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td class="cell1"&gt;r1c1&lt;/td&gt;
              &lt;td class="cell2"&gt;r1c2&lt;/td&gt;
              &lt;td class="cell3"&gt;r1c3&lt;/td&gt;
              &lt;td class="cell4"&gt;r1c4&lt;/td&gt;
              &lt;td class="cell5"&gt;r1c5&lt;/td&gt;
              &lt;td class="cell6"&gt;r1c6&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="cell1"&gt;r2c1&lt;/td&gt;
              &lt;td class="cell2"&gt;r2c2&lt;/td&gt;
              &lt;td class="cell3"&gt;r2c3&lt;/td&gt;
              &lt;td class="cell4"&gt;r2c4&lt;/td&gt;
              &lt;td class="cell5"&gt;r2c5&lt;/td&gt;
              &lt;td class="cell6"&gt;r2c6&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="cell1"&gt;r3c1&lt;/td&gt;
              &lt;td class="cell2"&gt;r3c2&lt;/td&gt;
              &lt;td class="cell3"&gt;r3c3&lt;/td&gt;
              &lt;td class="cell4"&gt;r3c4&lt;/td&gt;
              &lt;td class="cell5"&gt;r3c5&lt;/td&gt;
              &lt;td class="cell6"&gt;r3c6&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="cell1"&gt;r4c1&lt;/td&gt;
              &lt;td class="cell2"&gt;r4c2&lt;/td&gt;
              &lt;td class="cell3"&gt;r4c3&lt;/td&gt;
              &lt;td class="cell4"&gt;r4c4&lt;/td&gt;
              &lt;td class="cell5"&gt;r4c5&lt;/td&gt;
              &lt;td class="cell6"&gt;r4c6&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/fieldset&gt;
  
  
  
  
  
  
  
  body {
  background:white;
  //width:950px;
  margin:auto;
  font:normal normal normal 14px/120% Arial, Helvetica, sans-serif;
  padding:20px;
  margin-bottom:30px;
  }
  
  
  fieldset {
  width:400px;
  margin:auto;
  }
  
  table {
  border-collapse: separate;
  border-spacing: 0px 2px;
  text-align: center; 
  }
  table td.cell1,table td.cell4 {
  border: 1px solid black;
  border-right:none;
  width:50px;
  }
  table td.cell2,table td.cell5 {
  border: 1px solid black;
  border-right:none;
  border-left:none;
  width:80px;
  }
  table td.cell3,table td.cell6 {
  border: 1px solid black;
  border-left:none;
  width:60px;
  }
  </code></pre>