96

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>

Improve this question
1

5 Answers 5

Reset to default
124

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Do you agree with or refute the validity of the suggested dupe target commented under the question? Does this question or your answer have a significant difference that should serve to deny the dupe closure?
36

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>

Improve this answer

4 Comments

Yes, that seems right. But could you describe the line *border-collapse: expression('separate', cellSpacing = '10px'); a little for me?
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.
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 (blog.dynatrace.com/2010/02/16/…).
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.
3

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.

Improve this answer

1 Comment

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 (netmarketshare.com/…)
2

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

Improve this answer

Comments

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.