97

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.

Improve this question
1

7 Answers 7

Reset to default
132

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.

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

1 Comment

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.
43 
table { border-spacing: 10px; }

This worked for me once I removed 

border-collapse: separate;

from my table tag.

Improve this answer

2 Comments

separate instead of seperate, but it helped me :-)
Yeah didn't know you had to change the 'border-collapse' too. This should be the correct answer.
33

Mine is:

border-spacing: 10px; border-collapse: separate;
Improve this answer

1 Comment

i need to add the boder-collapse css property for the margin to take affect. thanks
4

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

Improve this answer

Comments

4

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.

Improve this answer

Comments

4

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.

Improve this answer

1 Comment

the width worked for me as I expected.
0

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

<table style="border-spacing: 5px 10px;">
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.