CSS horizontal table cell spacing: how?

Question

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

Example

| 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.

Thanks

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

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    table { border: 1px solid black; }
    td { background: yellow; }
  </style>
</head>
<body>
<table>
<col style="padding-right: 30px;">
<col style="padding-right: 30px;">
<col>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr>
  <td>7</td>
  <td>8</td>
  <td>9</td>
</tr>
</table>
</body>
</html>

What browser? On Firefox fo me Firebug shows the columns bigger than the table but the table cells aren't actually resized (ie the columns according to Firebug extend beyond the table). — Jordie, Mar 18 '09 at 21:12
possible duplicate of [How to set cellspacing in tables only horizontally](http://stackoverflow.com/questions/12970826/how-to-set-cellspacing-in-tables-only-horizontally) — ivan_pozdeev, Jul 10 '15 at 15:37

Josh Stodola · Answer 1 · 2009-03-19T14:34:35.773

How about giving each table cell a transparent border? I am pretty sure this will do it for you...

table td {
  border:solid 5x transparent;
}

And you can only apply it horizontally like so...

table td {
  border-left:solid 10px transparent;
}
table td:first-child {
  border-left:0;
}

Here's a complete working demo of what I believe you are trying to accomplish...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      table {
        border: 1px solid black;
      }

      table td {
        background: yellow;
        border-left:solid 10px transparent;
      }

     table td:first-child {
       border-left:0;
     }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
    </table>
  </body>
</html>

I do not believe IE6 supports the CSS :first-child, so here is a workaround for that...

<!–-[if IE 6]>
<style type="text/css">
  table td {
    border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent');
  }
</style>
<![endif]-->

I realize that. It's all about picking the best solution for the requirements. — Josh Stodola, Mar 19 '09 at 14:31
iirc, IE6 doesn't support transparent borders... so, it will render as black. — canon, Jan 06 '12 at 15:23

score 12 · Answer 2 · answered Mar 05 '12 at 15:21

12

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;">

answered Mar 05 '12 at 15:21

Lukas

121
1
2

1

Great! Two limitations: margin on first and last spacing and Quirksmode implies may not work for IE7 and below http://www.quirksmode.org/css/tables.html – KCD Nov 30 '12 at 00:37
If after this style - first and/or last column spacing is an issue - you may put the table in a container `div` with negative left and/or right `margins`. – Ujjwal Singh Dec 20 '12 at 06:56
This seems to be a little problematic on Chrome. Looks great on Firefox. – SMBiggs Jul 16 '18 at 22:34

Darko · Answer 3 · 2009-03-18T19:28:25.107

try using cols

example

<table>
    <col style="padding-right:20px;" />
    <col style="padding-right:30px;" />
    <col />
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

cols also support classes :)

hope this helps

Darko

EDIT: To clarify a col is an element declared at the top of the table to influence entire columns. The first col element will influence the first column, the second col = second column and so on. They can be grouped in colgroups if you wish to assign the same style to more than one column.

EDIT2: After some more research it turns out that the only reliable styles you can set on a col element are:

border
background
width
visibility

No margin or padding. Bugger! Would setting the width of the columns explicitly solve your problem?

score 2 · Answer 4 · answered Mar 17 '09 at 22:10

2

You could also consider using a series of fixed width divs floated left with margins. This might give you a bit more control over the element styling.

.row div {
     margin-right: 10px;
     float: left;
     width: 50px;
}

    <div class="row">
        <div>Cell One</div>
        <div>Cell Two</div>
        <div>Cell Three</div>
    </div>

answered Mar 17 '09 at 22:10

Bayard Randel

9,930
3
42
46

Errr.. we're advocating using divs even for tabular data now? – cletus Mar 17 '09 at 23:07
No, but the OP seems to be having difficulty achieving the styling they want with the table element. Tables are certainly best for tabular data. – Bayard Randel Mar 18 '09 at 21:15

score 2 · Answer 5 · answered Jan 06 '12 at 15:20

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'>
          <tr>
                <td class='smoothBox'>
                    ...
                </td>
                <td class='smoothBox'>
                    ...
                </td>
          </tr>
    </table>
</div>

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.

score 1 · Answer 6 · answered Jan 25 '15 at 09:47

1

It is work for me

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

answered Jan 25 '15 at 09:47

Shaho Amini

390
4
11

score 1 · Answer 7 · answered Mar 17 '09 at 22:06

Did you try using col grouping?

<table>
    <colgroup>
        <col class="right-padding" />
        <col class="right-padding" />
        <col />
    </colgroup>
    <tbody>
        <tr>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
    </tbody>
</table>

score 0 · Answer 8 · answered Mar 18 '09 at 07:01

0

What about just adding an empty cell that works as a spacer? You could use the col-tag as stated above to give the empty cells a certain width

<col/>
<col style="width:20px"/>
<col/>
<col style="width:20px"/>
<col/>
<tr>
  <td>Data</td>
  <td>& nbsp;</td>
  <td>Data</td>
  <td>& nbsp;</td>
  <td>Data</td>
</tr>

Or if you want to do more with them, just add classes to them instead of usin inline styling...

answered Mar 18 '09 at 07:01

peirix

36,512
23
96
126

1

Use more markup for styling purposes? Wow. This is a horrible idea. – Josh Stodola Mar 18 '09 at 21:03
After reading through all the above answers, peirix's suggestion is the only one that works, and works in all browsers. Yea using markup for styling is generally a bad idea, but in my particular case this is the only thing that works. The border-spacing idea is close, but it ends up putting the space between the label:value (first two TD cells), which looks bad. – Ryan Stille Dec 18 '12 at 16:37

score -1 · Answer 9 · answered Jul 14 '11 at 13:58

The Josh's answer is quite good, but in my opinion needlessly complicated. When you set the table borders to "hidden" and collapse mode to "collapse", the borders on the outer edges of columns will be eliminated, just as required.

Working example:

Stylesheet:

table#my_table  {
    border-collapse: collapse;
    border-style: hidden;
}

table#my_table td {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

HTML:

<table id="my_table">
   <tr>
     <td>A1</td>
     <td>A2</td>
     <td>A3</td>
   </tr>
   <tr>
     <td>B1</td>
     <td>B2</td>
     <td>B3</td>
   </tr>         
</table>

CSS horizontal table cell spacing: how?

9 Answers9

Linked