Add space between cells (td) using css

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.

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.

table { 
  border-spacing: 10px; 
} 

This worked for me once I removed

border-collapse: separate;

from my table tag.

Mine is:

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

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

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.

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.

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

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