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

Question 1

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.

Question 2

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

Question 3

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

Question 4

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

Question 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

Question 6

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

Question 7

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

Question 8

Ejemplo de uso de border-collapse: separado; como

contenedor mostrado como tabla:

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

Answer 1

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.

Answer 2

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

mu es demasiado corto

Answer 3

@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

Answer 4

Relacionado: stackoverflow.com/questions/5737693/…

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

Answer 5

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

Answer 6

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

Answer 7

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

Hushme

Answer 8

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

Answer 9

1

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

Bhojendra Rauniyar

Answer 10

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

Hushme

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

3

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

kosmos

Answer 15

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

Answer 16

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

Answer 17

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

Answer 18

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

Answer 19

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

Answer 20

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

Bhojendra Rauniyar

Answer 21

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

Answer 22

1

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

toster-cx

Answer 23

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

mpen

Answer 24

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

Answer 25

1

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

ρяσѕρєя K

Answer 26

2

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

Muslimbek

Answer 27

Ejemplo de uso de border-collapse: separado; como

contenedor mostrado como tabla:

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

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

Respuestas: