title: CSS horizontal table cell spacing: how?
body: <p>Hopefully this is an easy one but I have not found a solution.  I want to put space between columns on a table.</p>
  
  <p>Example</p>
  
  <pre><code>| Cell |&lt;- space -&gt;| Cell |&lt;- space -&gt;| Cell |
  </code></pre>
  
  <p>An important point is that I do not want space on the edges. There is a border-spacing property but it is not supported in IE (6 or 7) so that is no good.  It also puts space at the edges.</p>
  
  <p>The best I have come up with is to put padded-right: 10px on my table cells and add a class to the last one to remove the padding.  This is less than ideal because the extra space is part of the cell not outside it.  I guess you could do the same thing with a transparent border?</p>
  
  <p>I also tried using jQuery:</p>
  
  <pre><code>$(function() {
    $("table &gt; tbody &gt; tr:not(:last-child").addClass("right-padding");
  });
  </code></pre>
  
  <p>but even on tables that are only ~100 rows in size this was taking 200-400ms in some cases, which is too slow.</p>
  
  <p>Any help appreciated.</p>
  
  <p>Thanks</p>
  
  <p>To those suggesting columns they do not work.  Try this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Layout&lt;/title&gt;
    &lt;style type="text/css"&gt;
      table { border: 1px solid black; }
      td { background: yellow; }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table&gt;
  &lt;col style="padding-right: 30px;"&gt;
  &lt;col style="padding-right: 30px;"&gt;
  &lt;col&gt;
  &lt;tr&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;2&lt;/td&gt;
    &lt;td&gt;3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;4&lt;/td&gt;
    &lt;td&gt;5&lt;/td&gt;
    &lt;td&gt;6&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;7&lt;/td&gt;
    &lt;td&gt;8&lt;/td&gt;
    &lt;td&gt;9&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>