Pregunta Cómo poner espacio entre los elementos de TBODY


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?


73
2017-11-17 04:29


origen


Respuestas:


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>

46
2017-11-17 04:31



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

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

}

65
2018-05-26 00:03



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 en un "rápido y sucio" camino.

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

15
2017-11-17 18:00



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>

6
2017-11-17 05:09



Solo establece display como block y funcionará

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

6
2018-05-15 15:26



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

Básicamente, si tienes un <tbody> estructurado de esta manera:

<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 en ::before pseudo elemento como este:

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

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

Entonces, si alguien encuentra ese tipo de problema, la solución es diseñar ::before pseudo de esta manera:

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

Aquí está un violín


6
2017-09-15 13:06



De todas las respuestas dadas anteriormente, solo las respuestas de djenson47 retienen separación de la presentación y el contenido. El inconveniente de la modelo de borde colapsado método es que ya no puede usar la tabla frontera o espacio de células atributos 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 primer hijo método es el más elegante.

Alternativamente, también puedes configurar tu clase TBODY ' rebosar propiedad a cualquier 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>

3
2018-04-02 06:36



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.


3
2017-07-11 11:00



NUEVA RESPUESTA

Puedes usar tantos <tbody> etiquetas como quieras 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 estás tratando de hacer, asigna tu <tbody>etiquetas clases y luego referencia a su individuo <td> etiquetas a través de CSS como tal:

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 el atributo de clase o id en su <tr> elementos y dar su correspondiente <td> relleno de etiquetas:

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

Incluso puedes asignar la parte superior e inferior <tr>Es una clase adicional para que solo hagan el relleno superior o inferior, respectivamente:

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

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

y en tu HTML, tu <tr> la etiqueta 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!


1
2018-04-02 06:51