CSS horizontal table cell spacing: how?

By : Jordie
Source: Stackoverflow.com

Hopefully this is an easy one but I have not found a solution. I want to put space between columns on a table.


| Cell |<- space ->| Cell |<- space ->| Cell |

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.

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?

I also tried using jQuery:

$(function() {
  $("table > tbody > tr:not(:last-child").addClass("right-padding");

but even on tables that are only ~100 rows in size this was taking 200-400ms in some cases, which is too slow.

Any help appreciated.


To those suggesting columns they do not work. Try this:

  <style type="text/css">
    table { border: 1px solid black; }
    td { background: yellow; }
<col style="padding-right: 30px;">
<col style="padding-right: 30px;">
By : Jordie


It is work for me

border-collapse: separate; border-spacing: 0px 3px;

It is may be what are you loking for:

You can use two values: the first is the horizontal cellspacing, the second the vertical one.

<table style="border-spacing: 40px 10px;">
By : Lukas

Josh's answer doesn't work if you already have borders around your cells, like me.

I solved the problem by shifting the whole table slightly to the left, using "position: relative; left: -10px". I combined this with cellspacing on the table.

<div id='sandbox'>
    <table cellspacing='10'>
                <td class='smoothBox'>
                <td class='smoothBox'>

and the css:

#sandbox {
    float: left;
    position: relative; /* move the whole sandbox */
    left: -11px;        /* slightly to the left */
    width: 950px;
    margin-top: 0px;
    padding: 1px;
    text-align: left;
#sandbox table {
    float: left;
    width: 100%;
#sandbox td {
    width: 300px;
    vertical-align: top;

This is what works for me, I hope it may help you too.

By : Timo

This video can help you solving your question :)
By: admin