Agregar espacio entre celdas (td) usando css

Estoy tratando de agregar una tabla con espacio entre celdas, ya que el color de fondo de la celda es blanco y el color de fondo de la tabla es azul, puede ver fácilmente que el relleno y el margen no funcionan (lo estoy aplicando al td), solo agregará espacio dentro de la celda.

Quieres border-spacing:

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

O en un bloque CSS en algún lugar:

table {
  border-spacing: 10px;
}

Ver quirksmode en border-spacing. Tenga en cuenta que border-spacingno funciona en IE7 y versiones anteriores.

table { 
  border-spacing: 10px; 
} 

Esto funcionó para mí una vez que quité

border-collapse: separate;

de la etiqueta de mi mesa.

El mio es:

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

Considere el uso de atributos cellspacingy cellpaddingpara la propiedad de tableetiqueta o border-spacingCSS.

El parámetro de espacio entre celdas (distancia entre celdas) de la etiqueta TABLE es precisamente lo que desea. La desventaja es que es un valor, que se usa tanto para x como para y, no puede elegir un espaciado o relleno diferente vertical u horizontalmente. También hay una propiedad CSS, pero no es ampliamente compatible.

Supongamos cellspcing/ cellpadding/ border-spacingpropiedad no funcionó, puede utilizar el código de la siguiente manera.

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

Lo intenté y tuve éxito mientras separaba el botón usando el ancho de la tabla y hago un td vacío como 2 o 1%, no devuelve más diferente.

Si desea valores separados para los lados y la parte superior-inferior.

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