espacio entre divs - mostrar tabla-celda

96

Tengo aquí dos divs:

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

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

¿Hay alguna forma de hacer espacio entre estos dos divs (que tienen display:table-cell)?

Sistema-x32z
fuente

Respuestas:

192

Puede utilizar la border-spacingpropiedad:

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

Demostración de JSBin

¿Alguna otra opción?

Bueno , en realidad no.

¿Por qué?

  • marginla propiedad no es aplicable a los display: table-cellelementos.
  • padding la propiedad no crea espacio entre los bordes de las celdas.
  • floatLa propiedad destruye el comportamiento esperado de los table-cellelementos que pueden ser tan altos como su elemento padre.
Hashem Qolami
fuente
¿Alguna otra opción? Claro position: relative.
Jongosi
@Jongosi Según spec : El efecto de position: relativesobre table-*-group, table-row, table-column, table-cell, y table-captionelementos no está definido.
Hashem Qolami
3
También puede crear un borde de un solo lado del mismo color que el fondo. border-right: 10px solid #FFF. Esto funcionó bien para mí al diseñar un menú desplegable de CSS cuando quería algo de espacio entre los table-cellelementos.
armadadrive
1
También puede agregar celdas simplemente para espaciar. No es ideal, pero al menos evita el dolor de cabeza de intentar desactivar el espaciado de bordes en la celda más a la derecha.
Daniel
También quería que el "relleno" estuviera en solo 1 borde de la "celda", así que tuve que usar la solución de armadadrive, excepto que usé un color de borde de rgba (0,0,0,0) para un borde transparente, así que no tiene que preocuparse por el color / imagen de fondo. borde derecho: rgba sólido de 10px (0,0,0,0);
JAX
19

Use bordes transparentes si es posible.

Demostración de JSFiddle

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

Explicación

Puede usar la border-spacingpropiedad, como sugiere la respuesta aceptada, pero esto no solo genera espacio entre las celdas de la tabla, sino también entre las celdas de la tabla y el contenedor de la tabla. Esto puede no ser deseado.

Si no necesita bordes visibles en las celdas de su tabla, debe usar transparentbordes para generar márgenes de celda. Los bordes transparentes requieren configuración background-clip: padding-box;porque, de lo contrario, el color de fondo de las celdas de la tabla se muestra en el borde.

Los bordes transparentes y el clip de fondo son compatibles con IE9 en adelante (y todos los demás navegadores modernos). Si necesita compatibilidad con IE8 o no necesita espacio transparente real, simplemente puede establecer un color de borde blanco y omitirlo background-clip.

Max
fuente
La configuración 'border-right' es realmente suficiente para proporcionar el espacio entre, no se requiere ninguna declaración de "tabla".
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
fuente
0

Bueno, lo anterior funciona, aquí está mi solución que requiere un poco menos de marcado y es más flexible.

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

Haga un nuevo div con el nombre que sea (solo usaré table-split) y le dará un ancho, sin agregarle contenido, mientras lo coloca entre los divs necesarios que deben separarse.

Puede agregar el ancho que considere necesario. Solo usé 0.6% porque es lo que necesitaba cuando tenía que hacer esto.

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

Luego
fuente
10
Ésta es una solución terrible.
1
Esta era una estrategia común cuando se usaban elementos de tabla reales para propósitos de diseño, y parte de la razón por la que la metodología ahora es obsoleta.
Rakitin
Como solo se puede lograr con css, se debe evitar el uso de html
Toni Michel Caubet