html - thead - Cómo poner espacio entre los elementos de TBODY

td html

Question

Tengo una mesa como esta:

<table>
<tfoot>
<tr><td>footer</td></tr>
</tfoot>
<tbody>
<tr><td>Body 1</td></tr>
<tr><td>Body 1</td></tr>
<tr><td>Body 1</td></tr>
</tbody>
<tbody>
<tr><td>Body 2</td></tr>
<tr><td>Body 2</td></tr>
<tr><td>Body 2</td></tr>
</tbody>
<tbody>
<tr><td>Body 3</td></tr>
<tr><td>Body 3</td></tr>
<tr><td>Body 3</td></tr>
</tbody>
</table>

Me gustaría poner algo de espacio entre cada elemento tbody, pero el relleno y el margen no tienen ningún efecto. ¿Algunas ideas?

Answer 1

NUEVA RESPUESTA

Puede usar tantas etiquetas <tbody> como desee. No me di cuenta de que estaba bien por W3C hasta ahora. No quiere decir que mi solución a continuación no funciona (lo hace), pero para hacer lo que intenta hacer, asigne sus clases de etiquetas <tbody> y luego haga referencia a sus etiquetas <td> individuales a través de CSS de esta forma:

table tbody.yourClass td {
padding: 10px;
}

y su HTML así:

<table>
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody class="yourClass">
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

Prueba a ese tipo :)

ANTIGUA RESPUESTA

Hagas lo que hagas, NO insertes filas en blanco ...

no deberías tener más de 1 elemento tbody en tu mesa. lo que puede hacer es establecer la clase o el atributo id en sus elementos <tr> y dar su relleno de etiquetas <td> correspondiente:

table {
border-collapse: collapse;
}
tr.yourClass td {
padding: 10px;
}

Incluso puede asignar una clase adicional a los <tr> superiores e inferiores para que solo rellenen la parte superior o inferior, respectivamente:

tr.yourClass.topClass td {
padding: 10px 0 0 0;
}
tr.yourClass.bottomClass td {
padding: 0 0 10px 0;
}

y en su HTML, su etiqueta <tr> se vería así:

<table>
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr class="yourClass topClass"><td>Text</td></tr>
<tr class="yourClass"><td>Text</td></tr>
<tr class="yourClass bottomClass"><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

¡Espero que esto ayude!

Answer 2

Algo así funcionará, dependiendo de los requisitos de soporte de su navegador:

tbody::before
{
content: '''';
display: block;
height: 15px;
}

Answer 3

Aquí hay otra posibilidad que se basa en: primer hijo que no está disponible en todos los navegadores:

<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
}
tbody tr:first-child td {
padding-top: 15px;
}
</style>
<table>
<tfoot>
<tr><td>footer</td></tr>
</tfoot>
<tbody>
<tr><td>Body 1</td></tr>
<tr><td>Body 1</td></tr>
<tr><td>Body 1</td></tr>
</tbody>
<tbody>
<tr><td>Body 2</td></tr>
<tr><td>Body 2</td></tr>
<tr><td>Body 2</td></tr>
</tbody>
<tbody>
<tr><td>Body 3</td></tr>
<tr><td>Body 3</td></tr>
<tr><td>Body 3</td></tr>
</tbody>
</table>

Answer 4

De todas las respuestas dadas anteriormente, solo las respuestas de djenson47 retienen la separación de la presentación y el contenido . El inconveniente del método del modelo de borde colapsado es que ya no puede usar los atributos border o cellspacing de la tabla para separar las celdas individuales. Podría argumentar que esto es algo bueno, y hay algunas soluciones, pero puede ser un dolor. Entonces creo que el método del primer hijo es el más elegante.

Alternativamente, también puede establecer la propiedad de desbordamiento de su clase de TBODY a cualquier otra cosa que no sea "visible". Este método también le permite conservar un modelo de fronteras separadas:

<style>
tbody {
overflow: auto;
border-top: 1px solid transparent;
}
</style>
<table>
<tfoot>
<tr><td>footer</td></tr>
</tfoot>
<tbody>
<tr><td>Body 1</td></tr>
<tr><td>Body 1</td></tr>
<tr><td>Body 1</td></tr>
</tbody>
<tbody>
<tr><td>Body 2</td></tr>
<tr><td>Body 2</td></tr>
<tr><td>Body 2</td></tr>
</tbody>
<tbody>
<tr><td>Body 3</td></tr>
<tr><td>Body 3</td></tr>
<tr><td>Body 3</td></tr>
</tbody>
</table>

Answer 5

Debido a que el relleno se puede aplicar a TD, puede hacer un truco con el signo +. Entonces será posible dar un relleno superior a los TD del primer TR de un tbody:

// The first row will have a top padding
table tbody + tbody tr td {
padding-top: 20px;
}
// The rest of the rows should not have a padding
table tbody + tbody tr + tr td {
padding-top: 0px;
}

He agregado el "tbody + tbody" para que el primer tbody no tenga un relleno superior. Sin embargo, no es obligatorio.

Hasta donde yo sé, no hay inconvenientes :), aunque no probaron los navegadores más antiguos.

Answer 6

He tenido problemas para espaciar correctamente varios <tbody> con ::before pseudo, en presencia de <tr> contiene <td> con rowspan en un par de navegadores.

Básicamente, si tienes un <tbody> estructurado como este:

<tbody>
<tr>
<td>td 1</td>
<td rowspan"2">td 2</td>
<td>td 3</td>
<td>td 4</td>
</tr>
<tr>
<td>td 1</td>
<td>td 2</td>
<td>td 4</td>
</tr>
</tbody>

Y sigues quien aconseja escribir css on ::before pseudo element como este:

tbody::before
{
content: '''';
display: block;
height: 10px;
}

Esto afectará al rowspan, haciendo que la tabla "pierda" dentro del segundo <tr> cuántos <td> -rowspan están presentes en el primero.

Por lo tanto, si alguien encuentra ese tipo de problema, la solución es ::before estilo ::before pseudo de esta manera:

tbody::before
{
content: '''';
display: table-row;
height: 10px;
}

Aquí hay un fiddle

Answer 7

La gente siempre tendrá opiniones controvertidas sobre el uso de elementos de la tabla vacía para diseñar una página (como lo demuestra el voto a la baja de esta respuesta). Reconozco esto, pero a veces es más fácil usarlos de esta manera cuando trabajas de una manera " rápida y sucia ".

He utilizado filas vacías en proyectos anteriores para espaciar grupos de filas de la tabla. Asigné a las filas espaciadoras una clase css propia y definí una altura para esa clase que actuó como un margen superior e inferior para ese grupo de filas de la tabla.

 .separator{
height: 50px;
}
<table>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr class="separator" colspan="2"></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr class="separator" colspan="2"></tr>
tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
</table>

Si no tiene bordes en las celdas de su tabla, también puede definir una altura para su celda o fila típica en su hoja de estilos que espacia uniformemente todas las filas de su tabla.

tr{
height: 40px;
}

Answer 8

La respuesta djensen47 funciona muy bien para los navegadores más nuevos, sin embargo, como se señaló, IE7 no funciona.

Mi solución para este problema para apoyar a los navegadores más antiguos era envolver los contenidos de cada celda dentro de un div. Luego agrega un margen superior al div.

<table class="tbl">
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td><div></div></td></tr>
</table>

CSS

.tbl tr td div {
height:30px;
margin-top:20px;
}

La configuración de altura mantiene las celdas al menos a 30px de altura para evitar que el color de las celdas utilizado dentro del div se contraiga alrededor del texto. El margen superior crea el espacio deseado haciendo que toda la fila sea más alta.

Answer 9

Prueba esto, si no te importa no tener bordes.

<style>
table {
border-collapse: collapse;
}
table tbody {
border-top: 15px solid white;
}
</style>
<table>
<tfoot>
<tr><td>footer</td></tr>
</tfoot>
<tbody>
<tr><td>Body 1</td></tr>
<tr><td>Body 1</td></tr>
<tr><td>Body 1</td></tr>
</tbody>
<tbody>
<tr><td>Body 2</td></tr>
<tr><td>Body 2</td></tr>
<tr><td>Body 2</td></tr>
</tbody>
<tbody>
<tr><td>Body 3</td></tr>
<tr><td>Body 3</td></tr>
<tr><td>Body 3</td></tr>
</tbody>
</table>

Answer 10

Puede usar border-spacing en una tabla con grupos de filas de tablas para agregar un espacio entre esos grupos. Sin embargo, no creo que haya una forma de especificar qué grupos están espaciados y cuáles no.

<table>
<thead>
...
</head>
<tbody>
...
</tbody>
<tbody>
...
</tbody>
<tfoot>
...
</tfoot>
</table>

CSS

table {
border-spacing: 0px 10px; /* h-spacing v-spacing */
}

Answer 11

Simplemente configure la display como block y funcionará.

table tbody{
display:block;
margin-bottom:10px;
border-radius: 5px;
}