¿Cómo hacer colapsar las fronteras (en un div)?

81

Supongamos que tengo un marcado como: http://jsfiddle.net/R8eCr/1/

<div class="container">
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    ...
</div>

Entonces CSS

.container {
    display: table;
    border-collapse: collapse;
}
.column {
    float: left;
    overflow: hidden;
    width: 120px;
}
.cell {
    display: table-cell;
    border: 1px solid red;
    width: 120px;
    height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Tengo el div externo con display: table; border-collapse: collapse;y las celdas con display: table-cell¿por qué todavía no colapsan? ¿Que me estoy perdiendo aqui?

Por cierto, tal vez haya un número variable de celdas en una columna, por lo que no puedo tener solo bordes en un lado.

css

— Jiew Meng
fuente

Um, ¿por qué no usas <table>y amigos para las mesas?

— mu es demasiado corto

@muistooshort, porque tal vez haya un número variable de celdas y prefiero no tener celdas vacías en el diseño particular

— Jiew Meng

Relacionado: stackoverflow.com/questions/5737693/…

— Ciro Santilli 郝海东冠状病六四事件法轮功

36

aquí hay una demostración

primero necesitas corregir tu error de sintaxis es

display: table-cell;

no diaplay: table-cell;

   .container {
    display: table;
    border-collapse:collapse
}
.column {
    display:table-row;
}
.cell {
    display: table-cell;
    border: 1px solid red;
    width: 120px;
    height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

— Hushme
fuente

Hmm en el código real, lo tengo bien escrito ... hmm ... Supongo que debe ser algo más en el código real que no funciona ... Intentaré averiguar qué podría estar causando esto

— Jiew Meng

Corrigí mi error, es cierto, verifiqué su respuesta pero eliminé el flotador: izquierda, ancho y alto, ya sabía sobre border-cell

— Hushme

1

@Hushme, sí, mucha gente lo sabe, pero a veces cuelgan sin problemas, ¿no? de todos modos continúa, no tengo ningún problema.

— Bhojendra Rauniyar

1

El sistema de votación no me afecta, pero puedo ser feliz cuando alguien me ayuda.

— Bhojendra Rauniyar

no eres el único con capacidad css revisa mi perfil tengo 7 años de experiencia como desarrollador front-end

— Hushme

92

Utilice un margen negativo simple en lugar de utilizar una tabla de visualización.

Actualizado en fiddle JS Fiddle

.container { 
    border-style: solid;
    border-color: red;
    border-width: 1px 0 0 1px;
    display: inline-block;
}
.column { 
    float: left; overflow: hidden; 
}
.cell { 
    border: 1px solid red; width: 120px; height: 20px; 
    margin:-1px 0 0 -1px;
}
.clearfix {
    clear:both;
}

— iamjustcoder
fuente

83

En lugar de usar borderuse box-shadow:

  box-shadow: 
    2px 0 0 0 #888, 
    0 2px 0 0 #888, 
    2px 2px 0 0 #888,   /* Just to fix the corner */
    2px 0 0 0 #888 inset, 
    0 2px 0 0 #888 inset;

Demostración: http://codepen.io/Hawkun/pen/rsIEp

— usuario1032559
fuente

5

esta es en realidad la mejor solución que he encontrado. Soluciona el problema si sus datos se generan dinámicamente y no garantiza la perfección, digamos 9 elementos en una cuadrícula, sino 2, que si tiene eso con otras soluciones, faltan bordes. Bien hecho !

— Unsparing

3

Buen truco para diseños receptivos, evitando cambiar la propiedad de visualización.

— kosmos

3

Esto funciona bien para medios de pantalla. Pero en los medios impresos, la sombra de cuadro se considera como fondo y no se imprime.

— Marcello Nuccio

Esto funcionó bien para mí, pero observe que esas tres primeras sombras se pueden lograr con: 1px 1px 0 1px # 888 La extensión y el desplazamiento se encargan de las esquinas.

— Matt Schuette

1

box-shadowse ignora (desaparece) cuando se utilizan temas de alto contraste en Windows, así que siempre proporcione una alternativa si le preocupa la accesibilidad.

— tomasz86

5

Debe usar en display: table-rowlugar de float: left;a su columna y obviamente como @Hushme corrige su diaplay: table-celladisplay: table-cell;

 .container {
    display: table;
    border-collapse: collapse;
}
.column {
    display: table-row;
    overflow: hidden;
    width: 120px;
}
.cell {
    display: table-cell;
    border: 1px solid red;
    width: 120px;
    height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

manifestación

— Bhojendra Rauniyar
fuente

aquí verifique el enlace que ya estaba usando pero me olvido de eliminar el flotador: left jsfiddle.net/R8eCr/2 vea el número de enlace

— Hushme

Sí, está bien. solo estar tan cerca.

— Bhojendra Rauniyar

4

También puede utilizar márgenes negativos:

.column {
  float: left;
  overflow: hidden;
  width: 120px;
}
.cell {
  border: 1px solid red;
  width: 120px;
  height: 20px;
  box-sizing: border-box;
}
.cell:not(:first-child) {
  margin-top: -1px;
}
.column:not(:first-child) > .cell {
  margin-left: -1px;
}

<div class="container">
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

Expandir fragmento

— mpen
fuente

1

Usé el mismo método, solo que con border-top/left: 0;. Los márgenes crean compensaciones.

— toster-cx

@ toster-cx Supongo que eso es incluso mejor que superponer los bordes. Buen pensamiento :-)

— mpen

3

¿Por qué no utilizar el esquema? es lo que quieres delinear: 1px rojo sólido;

— Muslimbek
fuente

1

Agregue una explicación con la respuesta de cómo esta respuesta ayuda a OP a solucionar el problema actual

— ρяσѕρєя K

2

Aquí muestro muchas variaciones de colapso de fronteras. (usando la cuadrícula Bootstrap): codepen.io/leonardo1024/pen/KgbNGr

— Muslimbek

0

Ejemplo de uso de border-collapse: separado; como

contenedor mostrado como tabla:

ol[type="I"]>li{
  display: table;
  border-collapse: separate;
  border-spacing: 1rem;
}

— Dmytro Yurchenko
fuente