Add space between cells (td) using css

Question

I am trying to add a table with space between cell as the background colour of the cell is white and the background color of the table is blue, you can easily see that padding and margin are not working (I am applying it to the td), it will only add space inside of the cell.

possible duplicate of [How to set cellpadding and cellspacing in CSS?](http://stackoverflow.com/questions/339923/how-to-set-cellpadding-and-cellspacing-in-css) — user, Mar 07 '14 at 20:46

score 125 · Accepted Answer · answered Jan 15 '10 at 10:31

125

You want border-spacing:

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

Or in a CSS block somewhere:

table {
  border-spacing: 10px;
}

See quirksmode on border-spacing. Be aware that border-spacing does not work on IE7 and below.

answered Jan 15 '10 at 10:31

Dominic Rodger

97,747
36
197
212

2

in IE7 and below, you can use the cellspacing attribute in the table tag. You can supply both to get it working in IE also. Other browsers will prioritize the style. – Tor Valamo Jan 15 '10 at 10:34

score 43 · Answer 2 · edited Mar 08 '13 at 08:07

43

table { 
  border-spacing: 10px; 
}

This worked for me once I removed

border-collapse: separate;

from my table tag.

edited Mar 08 '13 at 08:07

simon

12,666
26
78
113

answered Oct 15 '10 at 23:09

Kelly

439
4
2

1

separate instead of seperate, but it helped me :-) – FredRoger Sep 12 '12 at 23:39
Yeah didn't know you had to change the 'border-collapse' too. This should be the correct answer. – jleggio Jan 22 '19 at 19:40

score 34 · Answer 3 · answered Aug 10 '14 at 16:23

34

Mine is:

border-spacing: 10px;
border-collapse: separate;

answered Aug 10 '14 at 16:23

JanBorup

5,337
1
29
17

1

i need to add the boder-collapse css property for the margin to take affect. thanks – ufk Jan 14 '16 at 14:51

score 4 · Answer 4 · answered Jan 15 '10 at 10:33

4

Consider using cellspacing and cellpadding attributes for table tag or border-spacing css property.

answered Jan 15 '10 at 10:33

Kniganapolke

5,073
5
22
19

score 4 · Answer 5 · answered Jan 15 '10 at 10:38

cellspacing (distance between cells) parameter of the TABLE tag is precisely what you want. The disadvantage is it's one value, used both for x and y, you can't choose different spacing or padding vertically/horizontally. There is a CSS property too, but it's not widely supported.

score 3 · Answer 6 · edited Oct 22 '18 at 13:55

Suppose cellspcing / cellpadding / border-spacing property did not worked, you can use the code as follow.

<div class="form-group">
  <table width="100%" cellspacing="2px" style="border-spacing: 10px;">
    <tr>                        
      <td width="47%">
        <input type="submit" class="form-control btn btn-info" id="submit" name="Submit" />
      </td>
      <td width="5%"></td>
      <td width="47%">
        <input type="reset" class="form-control btn btn-info" id="reset" name="Reset" />
      </td>
    </tr>
  </table>
</div>

I've tried and got succeed while seperate the button by using table-width and make an empty td as 2 or 1% it doesn't return more different.

score 0 · Answer 7 · answered May 05 '20 at 07:02

0

If you want separate values for sides and top-bottom.

<table style="border-spacing: 5px 10px;">

answered May 05 '20 at 07:02

obliviJohn

11
3

Add space between cells (td) using css

7 Answers7

Linked