¿Espacio entre dos filas en una tabla?
¿Es esto posible a través de CSS?
Lo estoy intentando
tr.classname {
border-spacing: 5em;
}
en vano. ¿Quizás estoy haciendo algo mal?
Necesitas usar relleno en tus tdelementos. Algo como esto debería funcionar. Por supuesto, puede obtener el mismo resultado utilizando un relleno superior en lugar de un relleno inferior.
En el código CSS siguiente, el signo mayor que significa que el relleno solo se aplica a tdelementos que son hijos directos de trelementos con la clase spaceUnder. Esto permitirá utilizar tablas anidadas. (Celdas C y D en el código de ejemplo). No estoy muy seguro de la compatibilidad del navegador con el selector secundario directo (piense en IE 6), pero no debería alterar el código en ningún navegador moderno.
/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */
tr.spaceUnder>td {
padding-bottom: 1em;
}<table>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr class="spaceUnder">
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>Esto debería mostrarse algo así:
+---+---+
| A | B |
+---+---+
| C | D |
| | |
+---+---+
| E | F |
+---+---+
En el padre table, intente configurar
table {
border-collapse: separate;
border-spacing: 5em;
}
Además de una declaración fronteriza, vea si esto logra el efecto deseado. Sin embargo, tenga en cuenta que IE no admite el modelo de "fronteras separadas".
Tienes una tabla con id de álbumes con cualquier dato... He omitido los trs y tds
<table id="albums" cellspacing="0">
</table>
En el CSS:
table#albums
{
border-collapse:separate;
border-spacing:0 5px;
}
Como tengo una imagen de fondo detrás de la mesa, falsificarla con relleno blanco no funcionaría. Opté por poner una fila vacía entre cada fila de contenido:
<tr class="spacer"><td></td></tr>
luego use css para darle a las filas espaciadoras una cierta altura y un fondo transparente.
De la red de desarrolladores de Mozilla :
La propiedad CSS de espaciado de bordes especifica la distancia entre los bordes de celdas adyacentes (solo para el modelo de bordes separados). Esto es equivalente al atributo de espacio entre celdas en HTML de presentación, pero se puede usar un segundo valor opcional para establecer un espaciado horizontal y vertical diferente.
Esta última parte suele pasar desapercibida. Ejemplo:
.your-table {
border-collapse: separate; /* allow spacing between cell borders */
border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */
ACTUALIZAR
Ahora entiendo que el OP quiere que filas específicas y separadas tengan un mayor espacio. Agregué una configuración con tbodyelementos que logra eso sin arruinar la semántica. Sin embargo, no estoy seguro de si es compatible con todos los navegadores. Lo hice en Chrome.
El siguiente ejemplo es para mostrar cómo puede hacer que parezca que la tabla existe en filas separadas, toda la dulzura de CSS. También le dio más espacio a la primera fila con la tbodyconfiguración. ¡Siéntete libre de usarlo!
Aviso de soporte: IE8+, Chrome, Firefox, Safari, Opera 4+
.spacing-table {
font-family: 'Helvetica', 'Arial', sans-serif;
font-size: 15px;
border-collapse: separate;
table-layout: fixed;
width: 80%;
border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
text-align: left;
padding: 5px 15px;
}
.spacing-table td {
border-width: 3px 0;
width: 50%;
border-color: darkred;
border-style: solid;
background-color: red;
color: white;
padding: 5px 15px;
}
.spacing-table td:first-child {
border-left-width: 3px;
border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
border-right-width: 3px;
border-radius: 0 5px 5px 0;
}
.spacing-table thead {
display: table;
table-layout: fixed;
width: 100%;
}
.spacing-table tbody {
display: table;
table-layout: fixed;
width: 100%;
border-spacing: 0 10px;
}<table class="spacing-table">
<thead>
<tr>
<th>Lead singer</th>
<th>Band</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bono</td>
<td>U2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Chris Martin</td>
<td>Coldplay</td>
</tr>
<tr>
<td>Mick Jagger</td>
<td>Rolling Stones</td>
</tr>
<tr>
<td>John Lennon</td>
<td>The Beatles</td>
</tr>
</tbody>
</table>