space between divs - wyświetla komórkę tabeli

97

Mam tutaj dwa divy:

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

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

Czy istnieje sposób na zrobienie odstępu między tymi dwoma elementami div (które mają display:table-cell)?

System-x32z
źródło

Odpowiedzi:

192

Możesz użyć border-spacingwłaściwości:

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

Jakaś inna opcja?

Cóż , nie do końca.

Czemu?

  • marginwłaściwość nie ma zastosowania do display: table-cellelementów.
  • padding właściwość nie tworzy przestrzeni między krawędziami komórek.
  • floatwłaściwość niszczy oczekiwane zachowanie table-cellelementów, które mogą być tak wysokie, jak ich element nadrzędny.
Hashem Qolami
źródło
Jakaś inna opcja? Jasne position: relative.
Jongosi
@Jongosi Według specyfikacji : Wpływ position: relativena table-*-group, table-row, table-column, table-celli table-captionelementów jest nieokreślona.
Hashem Qolami
3
Możesz także utworzyć jednostronne obramowanie w tym samym kolorze co tło. border-right: 10px solid #FFF. Działało to dobrze podczas projektowania menu rozwijanego CSS, gdy chciałem trochę odstępu między table-cellelementami.
armadadrive
1
Możesz także dodawać komórki wyłącznie do odstępów. Nie jest to idealne rozwiązanie, ale przynajmniej unikasz bólu głowy związanego z próbą wyłączenia odstępów między obramowaniem w komórce znajdującej się najbardziej po prawej stronie.
Daniel,
Chciałem również, aby "wypełnienie" znajdowało się tylko na jednej krawędzi "komórki", więc musiałem użyć rozwiązania armadadrive, z wyjątkiem tego, że użyłem obramowania w kolorze rgba (0,0,0,0) dla przezroczystej ramki, więc nie musisz martwić się o kolor / obraz tła. border-right: 10px solid rgba (0,0,0,0);
JAX
20

Jeśli to możliwe, używaj przezroczystych ramek.

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

Wyjaśnienie

Możesz użyć tej border-spacingwłaściwości, jak sugeruje zaakceptowana odpowiedź, ale to nie tylko generuje przestrzeń między komórkami tabeli, ale także między komórkami tabeli a kontenerem tabeli. To może być niepożądane.

Jeśli nie potrzebujesz widocznych obramowań komórek tabeli, powinieneś użyć transparentobramowań do wygenerowania marginesów komórek. Przezroczyste obramowania wymagają ustawienia, background-clip: padding-box;ponieważ w przeciwnym razie kolor tła komórek tabeli jest wyświetlany na obramowaniu.

Przezroczyste obramowanie i klip w tle są obsługiwane od IE9 w górę (i wszystkich innych nowoczesnych przeglądarek). Jeśli potrzebujesz zgodności z IE8 lub nie potrzebujesz rzeczywistej przezroczystej przestrzeni, możesz po prostu ustawić biały kolor obramowania i pominąć background-clip.

Maks
źródło
Ustawienie „border-right” w rzeczywistości wystarcza, aby zapewnić odstęp między nimi, nie jest wymagane deklarowanie „tabeli”.
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>
jalalBK
źródło
0

Cóż, powyższe działa, oto moje rozwiązanie, które wymaga trochę mniej znaczników i jest bardziej elastyczne.

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

Gareth Clarke
źródło
-6

Utwórz nowy element div o dowolnej nazwie (użyję tylko podziału tabeli) i nadaj mu szerokość, bez dodawania do niego zawartości, umieszczając go między niezbędnymi elementami div, które należy rozdzielić.

Możesz dodać dowolną szerokość, jaką uznasz za potrzebną. Użyłem tylko 0,6%, ponieważ właśnie tego potrzebowałem, kiedy musiałem to zrobić.

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

Zaraz
źródło
10
To straszne rozwiązanie.
1
Była to powszechna strategia, gdy rzeczywiste elementy tabeli były używane do celów układu, i po części jest to powód, dla którego metodologia jest obecnie przestarzała.
rakitin
Ponieważ można to osiągnąć tylko za pomocą css, należy unikać używania HTML
Toni Michel Caubet