spazio tra i div - mostra la cella della tabella


97

Ho qui due div:

<div style="display:table-cell" id="div1">
    content
</div>

<div style="display:table-cell" id="div2">
    content
</div>

C'è un modo per fare spazio tra questi due div (che hanno display:table-cell)?

Risposte:


192

Puoi usare la border-spacingproprietà:

HTML:

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
    </div>
</div>

CSS:

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row { display:table-row; }

.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
}

JSBin Demo

Qualche altra opzione?

Beh , non proprio.

Perché?

  • marginla proprietà non è applicabile agli display: table-cellelementi.
  • padding la proprietà non crea spazio tra i bordi delle celle.
  • floatproprietà distrugge il comportamento atteso di table-cellelementi che possono essere alti quanto il loro elemento genitore.

Qualche altra opzione? Certo position: relative.
Jongosi

@Jongosi Secondo spec : L'effetto position: relativesu table-*-group, table-row, table-column, table-cell, e table-captionelementi è indefinito.
Hashem Qolami

3
Puoi anche creare un bordo unilaterale dello stesso colore dello sfondo. border-right: 10px solid #FFF. Questo ha funzionato bene per me durante la progettazione di un menu a discesa CSS quando volevo uno spazio tra gli table-cellelementi.
armadadrive

1
Puoi anche aggiungere celle esclusivamente per la spaziatura. Non è l'ideale, ma almeno eviti il ​​mal di testa di provare a disattivare la spaziatura dei bordi sulla cella più a destra.
Daniel

Volevo anche che il "riempimento" fosse solo su 1 bordo della "cella", quindi ho dovuto usare la soluzione di armadadrive eccetto che ho usato un colore del bordo di rgba (0,0,0,0) per un bordo trasparente quindi ho non devi preoccuparti del colore / immagine di sfondo. bordo destro: 10px rgba solido (0,0,0,0);
JAX

20

Se possibile, usa bordi trasparenti.

JSFiddle Demo

https://jsfiddle.net/74q3na62/

HTML

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
        <div class="cell">Cell 3</div>
    </div>
</div>

CSS

.table {
  display: table;
  border: 1px solid black;
}

.row { display:table-row; }

.cell {
  display: table-cell;
  background-clip: padding-box;
  background-color: gold;
  border-right: 10px solid transparent;
}

.cell:last-child {
  border-right: 0 none;
}

Spiegazione

È possibile utilizzare la border-spacingproprietà, come suggerisce la risposta accettata, ma ciò non solo genera spazio tra le celle della tabella ma anche tra le celle della tabella e il contenitore della tabella. Questo potrebbe essere indesiderato.

Se non hai bisogno di bordi visibili sulle celle della tabella, dovresti quindi utilizzare i transparentbordi per generare i margini delle celle. I bordi trasparenti richiedono un'impostazione background-clip: padding-box;perché altrimenti il ​​colore di sfondo delle celle della tabella viene visualizzato sul bordo.

I bordi trasparenti e la clip di sfondo sono supportati in IE9 e versioni successive (e tutti gli altri browser moderni). Se hai bisogno della compatibilità con IE8 o non hai bisogno di uno spazio trasparente effettivo, puoi semplicemente impostare un colore del bordo bianco e lasciare background-clipfuori.


L'impostazione "bordo destro" è effettivamente sufficiente per fornire lo spazio tra, non è richiesta alcuna dichiarazione "tabella".
forsberg

0
<div style="display:table;width:100%"  >
<div style="display:table-cell;width:49%" id="div1">
content
</div>

<!-- space between divs - display table-cell -->
<div style="display:table-cell;width:1%" id="separated"></div>
<!-- //space between divs - display table-cell -->

<div style="display:table-cell;width:50%" id="div2">
content
</div>
</div>

0

Bene, quanto sopra funziona, ecco la mia soluzione che richiede un po 'meno di markup ed è più flessibile.

.cells {
  display: inline-block;
  float: left;
  padding: 1px;
}
.cells>.content {
  background: #EEE;
  display: table-cell;
  float: left;
  padding: 3px;
  vertical-align: middle;
}
<div id="div1" class="cells"><div class="content">My Cell 1</div></div>
<div id="div2" class="cells"><div class="content">My Cell 2</div></div>


-6

Crea un nuovo div con qualsiasi nome (userò solo table-split) e dagli una larghezza, senza aggiungere contenuto, mentre lo metti tra i div necessari che devono essere separati.

Puoi aggiungere la larghezza che ritieni necessaria. Ho usato solo lo 0,6% perché è ciò di cui avevo bisogno quando dovevo farlo.

.table-split {
  display: table-cell;
  width: 0.6%
}
<div class="table-split"></div>


10
Questa è una soluzione terribile.

1
Questa era una strategia comune quando gli elementi di tabella effettivi venivano utilizzati per scopi di layout e parte del motivo per cui la metodologia è ora obsoleta.
rakitin

Dato che può essere realizzato solo con css, l'uso di html dovrebbe essere evitato
Toni Michel Caubet
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.