title: CSS - Removing border-spacing on first and last columns
body: <p>I'm trying to style a table by separating each inner column with a 3px white border, like this: </p>
  
  <p><img src="https://i.stack.imgur.com/WpSE2.png" alt="What I&#39;m trying to achieve"></p>
  
  <p>So far I've tried a couple of approaches but I'm having a heck of a time. First, I tried setting a right border for each td element, but I found the border broke through the overall table border creating gaps in the outer border. Here's the code and the fiddle:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table class="grid"&gt;
  &lt;tr&gt;&lt;td&gt;Heading 1&lt;/td&gt;&lt;td&gt;Heading 2&lt;/td&gt;&lt;td&gt;Heading 3&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;A1&lt;/td&gt;&lt;td&gt;B1&lt;/td&gt;&lt;td&gt;C1&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;A2&lt;/td&gt;&lt;td&gt;B2&lt;/td&gt;&lt;td&gt;C2&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;A3&lt;/td&gt;&lt;td&gt;B3&lt;/td&gt;&lt;td&gt;C3&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.grid {
      font-family: segoe ui, calibri, arial, sans-serif;
      font-size: 12px;
      color: #5B636B;
      border: 1px solid #CCC;
      border-collapse: collapse;
      background-color: #FFF;
  }
  
  .grid tr {
      height: 30px;
      border-bottom: 1px solid #F4F4F4;
  }
  
  .grid tr:first-child {
      border: none;
      background-color: #ECEEF4;
  }
  
  .grid tr:last-child {
      border: none;
  }
  
  .grid td {
      padding: 0px 5px 0px 5px;
      border-right: 3px solid #FFF;
  }
  </code></pre>
  
  <p>FIDDLE:
  <a href="http://jsfiddle.net/theberengersniper/4pVc7/" rel="noreferrer">Fiddle here</a>.</p>
  
  <p>The next approach I tried was to remove border-collapse: collapse and try to leverage the table's own cell spacing to achieve what I wanted. While I could remove the vertical spacing by using border-spacing, I couldn't figure out how to remove the horizontal spacing from the far left and far right cells.</p>
  
  <p>Here's the code for that approach:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table class="grid"&gt;
  &lt;tr&gt;&lt;td&gt;Heading 1&lt;/td&gt;&lt;td&gt;Heading 2&lt;/td&gt;&lt;td&gt;Heading 3&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;A1&lt;/td&gt;&lt;td&gt;B1&lt;/td&gt;&lt;td&gt;C1&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;A2&lt;/td&gt;&lt;td&gt;B2&lt;/td&gt;&lt;td&gt;C2&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;A3&lt;/td&gt;&lt;td&gt;B3&lt;/td&gt;&lt;td&gt;C3&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.grid {
      font-family: segoe ui, calibri, arial, sans-serif;
      font-size: 12px;
      color: #5B636B;
      border: 1px solid #CCC;
      border-collapse: separate;
      border-spacing: 5px 0px;
      background-color: #FFF;
  }
  
  .grid tr {
      height: 30px;
      border-bottom: 1px solid #F4F4F4;
  }
  
  .grid tr:first-child {
      border: none;
      background-color: #ECEEF4;
  }
  
  .grid tr:last-child {
      border: none;
  }
  
  .grid td {
      padding: 0px 5px 0px 5px;
  }
  </code></pre>
  
  <p>I've also seen a suggestion that I could use the td:first-child and subsequently td:first-child + td, td:first-child + td + td and so on, but that seems awfully messy and not really practical because I don't know how many columns I'll have in the end and it could vary over time. (I would have posted a link to this post but as I'm new I can't post more than two links - its title is "HTML: How to style each table cell in a column via CSS?")</p>
  
  <p>I'm also not keen on using empty columns, really just because it seems like there ought to be a better CSS alternative.</p>
  
  <p>Could you help?</p>