Relleno de una fila de la tabla

85
<html>
    <head>
        <title>Table Row Padding Issue</title>
        <style type="text/css">
            tr {
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>
                        <h2>Lorem Ipsum</h2>
                        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet
                        neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse 
                        platea dictumst. Nullam elit enim, gravida eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed 
                        tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae 
                        mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor luctus vitae euismod purus 
                        hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non 
                        scelerisque.</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Así es como se ve el acolchado. Vea cómo el td interior no se ve afectado. ¿Cual es la solución? Problema de relleno de filas de tabla

Spencer
fuente
1
use <div>y en <p>lugar de una mesa
Natrium
35
los datos que se presentan son tabulares y deben estar en una tabla
Spencer

Respuestas:

119

El truco consiste en dar relleno a los tdelementos, pero hacer una excepción para el primero (sí, es truco, pero a veces tienes que seguir las reglas del navegador):

td {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;   
}

td:first-child {
  padding-left:20px;
  padding-right:0;
}

El primer hijo está relativamente bien apoyado: https://developer.mozilla.org/en-US/docs/CSS/:first-child

Puede usar el mismo razonamiento para el relleno horizontal usando tr:first-child td.

Alternativamente, excluya la primera columna usando el notoperador . Sin embargo, el soporte para esto no es tan bueno en este momento.

td:not(:first-child) {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;       
}
Joeri Hendrickx
fuente
Yo usaría: no operador para excluir un solo artículo. como tr: not (#first_row)
jeff
@CengizFrostclaw de hecho, eso sería más consecuente. Pero el apoyo no es tan bueno.
Joeri Hendrickx
Oh, puede que tengas razón. No lo sé, simplemente tiene sentido creer que: no el operador es más compatible, pero nuevamente, solo pruebo en Chrome: D
jeff
8
esto no es 'hacky', esto es exactamente para lo que están diseñados estos selectores
hilanderos
@spinners esto es hacky. No funciona con el diseño RTL. Cree ficticios <td>.
Adam Leggett
26

En las especificaciones CSS 1 y CSS 2 , el relleno estaba disponible para todos los elementos, incluido <tr>. Sin embargo, el soporte de relleno para table-row ( <tr>) se ha eliminado en CSS 2.1 y CSS 3 especificaciones . Nunca he encontrado la razón detrás de este molesto cambio que también afecta la propiedad de margen y algunos otros elementos de la tabla (encabezado, pie de página y columnas).

Actualización: en febrero de 2015, este hilo en la [email protected]lista de correo discutió acerca de agregar soporte de relleno y borde para fila de tabla. Esto aplicaría el modelo de caja estándar también a elementos de tabla-fila y tabla-columna. Permitiría tales ejemplos . El hilo parece sugerir que el soporte de relleno de filas de tablas nunca existió en los estándares CSS porque tendría motores de diseño complicados. En el Borrador del editor del modelo de cuadro básico de CSS del 30 de septiembre de 2014 , existen propiedades de relleno y borde para todos los elementos, incluidos los elementos de tabla-fila y tabla-columna. Si finalmente se convierte en una recomendación del W3C, su ejemplo de html + css puede funcionar como se esperaba en los navegadores por fin.

Futal
fuente
2
¡También me interesaría mucho la razón!
Dan
8

dar el relleno td

Moin Zaman
fuente
4
Lo único es que si hay 2 td dentro de un tr, habrá relleno entre el 2 td, lo cual no quiero.
Spencer
5

Opción 1

También puede resolverlo agregando un borde transparente a la fila (tr), así

HTML

<table>
    <tr> 
         <td>1</td>
    </tr>
    <tr> 
         <td>2</td>
    </tr>
</table>

CSS

tr {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

Funciona de maravilla, aunque si necesita bordes regulares, este método lamentablemente no funcionará.

opcion 2

Dado que las filas actúan como una forma de agrupar celdas, la forma correcta de hacerlo sería usar

table {
    border-collapse: inherit;
    border-spacing: 0 10px;
}
Karl Johan Vallner
fuente
1

Esta es una publicación muy antigua, pero pensé que debería publicar mi solución a un problema similar que enfrenté recientemente.

Respuesta : Resolví este problema mostrando el elemento tr como un elemento de bloque , es decir, especificando un CSS de display: block para el elemento tr . Puede ver esto en el ejemplo de código a continuación.

<style>
  tr {
    display: block;
    padding-bottom: 20px;
  }
  table {
    border: 1px solid red;
  }
</style>
<table>
  <tbody>
    <tr>
      <td>
        <h2>Lorem Ipsum</h2>
        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse platea dictumst. Nullam elit enim, gravida
          eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor
          luctus vitae euismod purus hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non scelerisque.
        </p>
      </td>
    </tr>
  </tbody>
</table>
<br>
<br>This TEXT IS BELOW and OUTSIDE the TABLE element. NOTICE how the red table border is pushed down below the end of paragraph due to bottom padding being specified for the tr element. The key point here is that the tr element must be displayed as a block
in order for padding to apply at the tr level.

Sunil
fuente
7
Esto encaja totalmente con la forma en que suele funcionar el diseño de la mesa. Si está haciendo esto, no debería usar una tabla, use una tabla div.
Caesay
-1

Simplemente puede agregar este estilo a la mesa.

table {
    border-spacing: 15px;
}
Ifesinachi Bryan
fuente