title: Cell spacing in div table
body: <p>I'd like the there to be 4 or so pixel space between each cell. I'd like the grey header to have the spaces rather then a block of grey. I tried playing around ( background-clip:padding-box; padding: 14px; margin etc) but couldn't figure out how to put a few pixels between cells in a div table. How do I do this?</p>
  
  <p>Demo of problem <a href="http://jsfiddle.net/EJBnm/" rel="nofollow noreferrer">http://jsfiddle.net/EJBnm/</a></p>
  
  <pre><code>&lt;div class="TableBox"&gt;
      &lt;div&gt;
          &lt;div&gt;Head&lt;/div&gt; &lt;div&gt;Bigger Head&lt;/div&gt; &lt;div&gt;Medium&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div&gt;First&lt;/div&gt; &lt;div&gt;Second&lt;/div&gt; &lt;div&gt;Third&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div&gt;First&lt;/div&gt; &lt;div&gt;Second&lt;/div&gt; &lt;div&gt;Third&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div&gt;First&lt;/div&gt; &lt;div&gt;Second&lt;/div&gt; &lt;div&gt;Third&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.TableBox {display: table;}
  .TableBox &gt; div {display: table-row; border-spacing: 5px}
  .TableBox &gt; div &gt;div {display: table-cell;  margin: 4px;}
  .TableBox &gt; div:nth-child(even){ color: red; }
  .TableBox &gt; div:nth-child(1){  background-color: #666666; color:white; border-spacing: 15px; background-clip:padding-box; padding: 14px; margin:0 20px}
  </code></pre>