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 paddi

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

table { 
  border-spacing: 10px; 
} 

This worked for me once I removed

border-collapse: separate;

from my table tag.

Answer 5

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

Answer 6

Mine is:

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