Agregar espacio entre celdas (td) usando css

90

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.

html css

— Amra
fuente

2

posible duplicado de ¿Cómo configurar el relleno de celdas y el espacio de celdas en CSS?

— usuario

116

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.

— Dominic Rodger
fuente

2

en IE7 y a continuación, puede utilizar el atributo de espacio de celdas en la etiqueta de la tabla. Puede proporcionar ambos para que funcione también en IE. Otros navegadores darán prioridad al estilo.

— Tor Valamo

36

table { 
  border-spacing: 10px; 
}

Esto funcionó para mí una vez que quité

border-collapse: separate;

de la etiqueta de mi mesa.

— Kelly
fuente

1

separados en lugar de separados, pero me ayudó :-)

— FredRoger

Sí, no sabía que también tenía que cambiar el "colapso de la frontera". Esta debería ser la respuesta correcta.

— jleggio

31

El mio es:

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

— JanBorup
fuente

1

Necesito agregar la propiedad css boder-collapse para que el margen surta efecto. gracias

— ufk

4

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

— Kniganapolke
fuente

4

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.

— SF.
fuente

2

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.

— RAM
fuente

0

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

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

— obliviJohn
fuente