Diseño de tabla CSS: ¿por qué table-row no acepta un margen?

.container { 
 
    width: 850px; 
 
    padding: 0; 
 
    display: table; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.row { 
 
    display: table-row; 
 
    margin-bottom: 30px; 
 
    /* HERE */ 
 
} 
 
.home_1 { 
 
    width: 64px; 
 
    height: 64px; 
 
    padding-right: 20px; 
 
    margin-right: 10px; 
 
    display: table-cell; 
 
} 
 
.home_2 { 
 
    width: 350px; 
 
    height: 64px; 
 
    padding: 0px; 
 
    vertical-align: middle; 
 
    font-size: 150%; 
 
    display: table-cell; 
 
} 
 
.home_3 { 
 
    width: 64px; 
 
    height: 64px; 
 
    padding-right: 20px; 
 
    margin-right: 10px; 
 
    display: table-cell; 
 
} 
 
.home_4 { 
 
    width: 350px; 
 
    height: 64px; 
 
    padding: 0px; 
 
    vertical-align: middle; 
 
    font-size: 150%; 
 
    display: table-cell; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="home_1"></div> 
 
    <div class="home_2"></div> 
 
    <div class="home_3"></div> 
 
    <div class="home_4"></div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="home_1"></div> 
 
    <div class="home_2"></div> 
 
    </div> 
 
</div>

Mi pregunta es relativa a la línea marcada HERE en el CSS. Descubrí que las filas están demasiado cerca unas de otras, así que traté de agregar un margen inferior para separarlas. Lamentablemente no funciona. Tengo que agregar los márgenes a las celdas de la tabla para separar las filas.

¿Cuál es la razón detrás de este comportamiento?

También, es aceptable utilizar esta estrategia para llevar a cabo maquetación como lo estoy haciendo:

[icon] - text  [icon] - text 
[icon] - text  [icon] - text

o hay una mejor estrategia?

Fuente

2010-01-02 Stefano Borini

Si desea espacio entre las filas, agregue relleno a home_4. –

Consulte el estándar CSS 2.1, sección 17.5.3. Cuando usa display:table-row, la altura del DIV está determinada únicamente por la altura de los elementos table-cell que contiene. Por lo tanto, el margen, el relleno y la altura en esos elementos no tienen ningún efecto.

http://www.w3.org/TR/CSS2/tables.html

Fuente

2010-01-02 23:42:04 richardtallent

¿Ha intentado establecer el margen inferior en .row div, es decir, en sus "celdas"? Cuando trabaja con tablas HTML reales, no puede establecer márgenes en filas, también, solo para celdas.

Fuente

2010-01-02 23:36:56 naivists

Desafortunadamente, eso no funcionó. Solo "relleno" puede afectar al div con 'display: table'. Sin embargo, eso no es lo mismo que margen ... –

Lo más parecido que he visto sería establecer border-spacing: 0 30px; al contenedor div. Sin embargo, esto simplemente me deja espacio en el borde superior de la mesa, lo que frustra el propósito, ya que querías margen inferior.

Fuente

2010-01-31 21:46:59

también, puedes probar 'line-height' –

Puedes eliminar espacios en la parte superior e inferior con' margin: -30px 0'. –

¿Qué significa esto para un trabajo en el entorno (usando una tabla real)?

table { 
    border-collapse: collapse; 
} 
tr.row { 
    border-bottom: solid white 30px; /*change "white" to your background color*/ 
}

no es tan dinámico, ya que hay que establecer explícitamente el color de la frontera (a menos que haya una forma de evitar eso también), pero esto es algo que estoy experimentando con un proyecto de la mía.

Editar para incluir comentarios relativos a "transparente":

tr.row { 
    border-bottom: 30px solid transparent; 
}

Fuente

2013-04-04 00:09:07 MuffinTheMan

+12

Pruebe con 'transparente' en lugar de 'blanco' como el color. – Lendrick

Wow ... ¡perfecto! Por cierto, transparente funciona perfectamente bien –

Funciona perfectamente para mí, incluso sin colapso de la tabla, solo para agregar un borde transparente a las celdas de la tabla. Gracias ! –

Fiddle

.row-seperator{ 
    border-top: solid transparent 50px; 
} 

<table> 
    <tr><td>Section 1</td></tr> 
    <tr><td>row1 1</td></tr> 
    <tr><td>row1 2</td></tr> 
    <tr> 
     <td class="row-seperator">Section 2</td> 
    </tr> 
    <tr><td>row2 1</td></tr> 
    <tr><td>row2 2</td></tr> 
</table> 


#Outline 
Section 1 
row1 1 
row1 2 


Section 2 
row2 1 
row2 2

esto puede ser otra solución

Fuente

2016-08-02 20:55:49

Hay una solución muy simple para esto, el border-spacing y border-collapse atributos de CSS funcionan en display: table;

Puede usar lo siguiente para obtener relleno/márgenes en sus celdas.

.container { 
 
    width: 850px; 
 
    padding:0; 
 
    display: table; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-collapse: separate; 
 
    border-spacing: 15px; 
 
} 
 

 
.row { 
 
    display: table-row; 
 
} 
 

 
.home_1 { 
 
    width:64px; 
 
    height: 64px; 
 
    padding-right: 20px; 
 
    margin-right: 10px; 
 
    display: table-cell; 
 
} 
 

 
.home_2 { 
 
    width:350px; 
 
    height: 64px; 
 
    padding: 0px; 
 
    vertical-align:middle; 
 
    font-size: 150%; 
 
    display: table-cell; 
 
} 
 

 
.home_3 { 
 
    width:64px; 
 
    height: 64px; 
 
    padding-right: 20px; 
 
    margin-right: 10px; 
 
    display: table-cell; 
 
} 
 

 
.home_4 { 
 
    width: 350px; 
 
    height: 64px; 
 
    padding: 0px; 
 
    vertical-align: middle; 
 
    font-size: 150%; 
 
    display: table-cell; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
     <div class="home_1">Foo</div> 
 
     <div class="home_2">Foo</div> 
 
     <div class="home_3">Foo</div> 
 
     <div class="home_4">Foo</div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="home_1">Foo</div> 
 
     <div class="home_2">Foo</div> 
 
    </div>

Tenga en cuenta que tiene tener

border-collapse: separate;

De lo contrario, no funcionará.

Fuente

2016-12-05 22:18:26

-1

agregando una etiqueta br entre los divs trabajados. agregue la etiqueta br entre dos divs que se muestran: tabla-fila en una matriz con pantalla: tabla

Fuente

2017-11-16 10:49:47

Diseño de tabla CSS: ¿por qué table-row no acepta un margen?

Respuesta

Cuestiones relacionadas