Aggiungi spazio tra le celle (td) usando css

90

Sto cercando di aggiungere una tabella con uno spazio tra le celle poiché il colore di sfondo della cella è bianco e il colore di sfondo della tabella è blu, puoi facilmente vedere che il riempimento e il margine non funzionano (lo sto applicando a td), aggiungerà solo spazio all'interno della cella.

html css

— Amra
fonte

2

possibile duplicato di Come impostare il cellpadding e il cellpacing in CSS?

— utente

116

Vuoi border-spacing:

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

O in un blocco CSS da qualche parte:

table {
  border-spacing: 10px;
}

Vedi quirksmode su border-spacing. Tieni presente che border-spacingnon funziona su IE7 e versioni precedenti.

— Dominic Rodger
fonte

2

in IE7 e versioni precedenti, puoi utilizzare l'attributo cellspacing nel tag della tabella. Puoi fornire entrambi per farlo funzionare anche in IE. Altri browser daranno la priorità allo stile.

— Tor Valamo

36

table { 
  border-spacing: 10px; 
}

Questo ha funzionato per me una volta rimosso

border-collapse: separate;

dal tag della mia tabella.

— Kelly
fonte

1

separato invece che separato, ma mi ha aiutato :-)

— FredRoger

Sì, non sapevo che dovevi cambiare anche il "crollo del confine". Questa dovrebbe essere la risposta corretta.

— jleggio

31

Il mio è:

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

— JanBorup
fonte

1

devo aggiungere la proprietà css boder-collapse affinché il margine abbia effetto. grazie

— ufk

4

Considera l'utilizzo di attributi cellspacinge cellpaddingper tabletag o border-spacingproprietà CSS.

— Kniganapolke
fonte

4

Il parametro cellpacing (distanza tra le celle) del tag TABLE è esattamente quello che vuoi. Lo svantaggio è che è un valore, usato sia per x che per y, non puoi scegliere spaziatura o spaziatura diverse verticalmente / orizzontalmente. C'è anche una proprietà CSS, ma non è ampiamente supportata.

— SF.
fonte

2

Supponiamo che la proprietà cellspcing/ cellpadding/ border-spacingnon abbia funzionato, puoi usare il codice come segue.

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

Ho provato e ho avuto successo mentre separavo il pulsante usando la larghezza della tabella e creavo un td vuoto come 2 o 1% non restituisce più diverso.

— Ariete
fonte

0

Se vuoi valori separati per i lati e dall'alto in basso.

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

— obliviJohn
fonte