Spacing between table cells

Question

I am trying to create a table in which each cell has a background color with a space between them. But I seem to be having problems with this.

I tried setting the td fields, but it didn't seem to be affected.

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

If I do the same with the add-on, it works, but then I have no spacing between cells.

Can anyone help me with this?

jsFiddle: http://jsfiddle.net/BfBSM/

Answer 1

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

Make sure border-collapse set to separate (or there will be one border between each cell, and not a separate border around each of them, which may have a gap between them). A.

Answer 2

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

HTML:

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

CSS

 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'); } 

Answer 3

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

Answer 4

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

Jsfiddle

Answer 5

To do this work, use

 <table cellspacing=12> 

If youd would rather be right than accomplish everything, you can use the CSS border-spacing , which is supported by some browsers.