html - examples - espacio entre divs-display table-cell

table css generator

Question

Tengo aquí dos divs:

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

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

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

Answer 1

Crea un nuevo div con cualquier nombre (usaré simplemente split de tabla) y dale un ancho, sin agregarle contenido, mientras lo colocas entre los divs necesarios que deben separarse.

Puede agregar cualquier ancho que considere necesario. Acabo de usar 0.6% porque es lo que necesitaba para cuando tuve que hacer esto.

.table-split {
  display: table-cell;
  width: 0.6%
}

<div class="table-split"></div>

Answer 2

Puede poner sus estilos CSS en línea en una clase css. Puede agregar espacio entre los dos div usando estilos css como relleno: 5px o margen: 5px.

<div class="tile">
   content
</div>
<div class="tile">
   content
</div>

.tile
{
   display: table-cell;
   padding: 5px;
}

Answer 3

Puede usar la propiedad de border-spacing :

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

• margin propiedad de margin no se aplica a la display: table-cell elementos de display: table-cell .
• padding propiedad de padding no crea espacio entre los bordes de las celdas.
• float propiedad float destruye el comportamiento esperado de elementos de table-cell de table-cell que pueden ser tan altos como su elemento principal.

Answer 4

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 utilizar la propiedad de espacio entre border-spacing , pero 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.

Si no necesita bordes visibles en las celdas de la tabla, debe usar border transparent para generar los márgenes de la celda. Los bordes transparentes requieren el ajuste 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 background-clip son compatibles en IE9 en adelante (y en todos los otros navegadores modernos). Si necesita compatibilidad con IE8 o no necesita espacio transparente real, simplemente puede establecer un color de borde blanco y dejar salir el background-clip .