Controlling Spacing Between Table Cells

Question

I'm trying to create a table where each cell has a background color with white space between them. But I seem to be having trouble doing this.

I tried setting td margins but it seems to have no effect.

table.myclass td {
    background-color: lime;
    margin: 12px 12px 12px 12px;
}

If I do the same thing with padding, it works, but then I don't have the spacing between cells.

Could someone help me with this?

table.test td {
  background-color: lime;
  margin: 12px 12px 12px 12px;
  /*padding: 12px 12px 12px 12px;*/
}

<table class="test">
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

possible duplicate of [How to set cellpadding and cellspacing in CSS?](http://stackoverflow.com/questions/339923/how-to-set-cellpadding-and-cellspacing-in-css) — Troy Alford, Apr 30 '13 at 17:20
Possible duplicate of [Set cellpadding and cellspacing in CSS?](https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css) — Brian Tompsett - 汤莱恩, Dec 24 '18 at 19:07

Quentin · Accepted Answer · 2017-12-05T12:46:18.600

111

Use the border-spacing property on the table element to set the spacing between cells.

Make sure border-collapse is set to separate (or there will be a single border between each cell instead of a separate border around each one that can have spacing between them).

edited Dec 05 '17 at 12:46

answered Sep 25 '12 at 14:56

Quentin

914,110
126
1,211
1,335

score 34 · Answer 2 · edited Sep 11 '20 at 15:54

34

Check this fiddle. You are going to need to take a look at using border-collapse and border-spacing. There are some quirks for IE (as usual). This is based on an answer to this question.

table.test td {
  background-color: lime;
  margin: 12px 12px 12px 12px;
  padding: 12px 12px 12px 12px;
}

table.test {
  border-collapse: separate;
  border-spacing: 10px;
  *border-collapse: expression('separate', cellSpacing='10px');
}

<table class="test">
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

edited Sep 11 '20 at 15:54

leonheess

16,068
14
77
112

answered Sep 25 '12 at 14:58

Buggabill

13,726
4
42
47

Yes, that seems right. But could you describe the line `*border-collapse: expression('separate', cellSpacing = '10px');` a little for me? – Jonathan Wood Sep 25 '12 at 15:05
2

Invalid CSS property name (so only parsed by broken parsers), followed by embedded JavaScript to set the (obsolete) cellspacing attribute to an invalid value (it should be 10 not 10px) in ancient versions of Internet Explorer. It isn't worth the effort for a cosmetic change in a dead browser. – Quentin Sep 25 '12 at 15:10
They were used in earlier versions of IE apparently. I had never used them, but according to the answer that I got this from, "expression('separate', cellSpacing = '10px') returns 'separate' but both statements are run, as in Javascript you can pass more arguments than expected and all of them will be evaluated." I think that if you need to support the low-end IE browsers, Javascript might be a lot faster than this expression as the expressions are evaluated quite often (http://blog.dynatrace.com/2010/02/16/the-real-performance-overhead-of-css-expressions/). – Buggabill Sep 25 '12 at 15:12
You had me excited for a second about being able to use margin with table cells. However, it doesn't work - changing the `margin` values in the fiddle has no effect. – kamilk Jul 12 '18 at 14:02

score 3 · Answer 3 · edited Sep 30 '12 at 14:04

3

table.test td {
    background-color: lime;
    padding: 12px;
    border:2px solid #fff;border-collapse:separate;
}

edited Sep 30 '12 at 14:04

Kate Gregory

18,808
8
56
85

answered Sep 25 '12 at 14:58

Web Designer cum Promoter

1,334
14
26

score 2 · Answer 4 · answered Sep 25 '12 at 16:45

2

To get the job done, use

<table cellspacing=12>

If you’d rather “be right” than get things done, you can instead use the CSS property border-spacing, which is supported by some browsers.

answered Sep 25 '12 at 16:45

Jukka K. Korpela

195,524
37
270
390

4

No longer 'some', but 'most': IE7 is dying a quick death at the hands of IE8, which DOES support the `border-spacing` CSS property, so I personally do not feel the need to support IE7 any more (http://www.netmarketshare.com/report.aspx?qprid=3&qpaf=&qpcustom=Microsoft+Internet+Explorer+7.0&qpcustomb=0) – Asfand Qazi Sep 16 '13 at 11:40

score 1 · Answer 5 · answered Sep 25 '12 at 14:59

1

Use border-collapse and border-spacing to get spaces between the table cells. I would not recommend using floating cells as suggested by QQping.

JSFiddle

answered Sep 25 '12 at 14:59

Halcyon

14,631
17
68
99

1

Simplest solution so far. Given some of the other responses, I probably should check with different browsers. – Jonathan Wood Sep 25 '12 at 15:06

Controlling Spacing Between Table Cells

5 Answers5

Linked

Related