Relleno de una fila de la tabla

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

Aquí está lo que el relleno se parece. Ver cómo la td en el interior no se ve afectado. ¿Cuál es la solución?
Relleno de una fila de la tabla

  • uso <div> y <p> en lugar de una tabla
  • los datos que se presentan es tabular y debe estar en una tabla
InformationsquelleAutor Spencer | 2010-09-07

6 Kommentare

  1. 98

    El truco es darle relleno en la td elementos, pero hacer una excepción de la primera (sí, es chapucero, pero a veces tienes que jugar por el navegador del reglamento):

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

    Primer niño está relativamente bien soportados: https://developer.mozilla.org/en-US/docs/CSS/:first-child

    Usted puede utilizar el mismo razonamiento para el acolchado horizontal mediante el uso de tr:first-child td.

    Alternativamente, excluir la primera columna por el uso de el no operador. Apoyo para que este no es tan bueno ahora, sin embargo.

    td:not(:first-child) {
      padding-top:20px;
      padding-bottom:20px;
      padding-right:20px;       
    }
    • Me gustaría utilizar :operador not para excluir a un solo elemento. como tr:no(#first_row)
    • de hecho, eso sería más consise. Pero el apoyo no es tan bueno.
    • Oh, usted puede estar en lo correcto. No sé, que sólo tiene sentido para creer que :no operador es una de las más uno compatible, pero de nuevo, yo sólo prueba en Chrome 😀
    • esto no es ‘chapucero’, esto es exactamente lo que estos selectores están diseñados para
    • este es chapucero. No funciona con RTL diseño. Crear dummy <td>s.
    • la adición de la no-html semántico es siempre el último recurso. Usted puede adaptar la regla para rtl contenido mediante el uso de la :dir(rtl) pseudoclass (me gustaría agregar a la respuesta, pero no he hecho la prueba de esto)
    • sólo es compatible con Firefox. Usted podría ajustar en html(dir=rtl) pero esto es tan chapucero como no-HTML semántico.
    • Suponiendo que ya necesita el atributo dir en el nivel superior, agregando que a su selector css suena bastante sano para mí.
    • No estoy contento con la hipótesis de la html elemento tendrá este atributo.

  2. 21

    En CSS 1 y CSS 2 especificaciones, el relleno estaba disponible para todos los elementos incluidos <tr>. Sin embargo, el soporte de relleno para la tabla fila (<tr>) ha sido eliminado en CSS 2.1 y CSS 3 especificaciones. Nunca he encontrado la razón detrás de este molesto cambios que también afectan a 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 el [email protected] lista de correo discutido acerca de la adición de soporte de relleno y borde de la mesa-fila. Esto se podría aplicar el estándar del modelo de cuadro también a la mesa fila y la mesa de la columna de los elementos. Ello permitiría tales ejemplos. El hilo parece sugerir que la tabla la fila de relleno apoyo, nunca existió en CSS normas, porque habría complicado diseño de motores. En el 30 de septiembre de 2014 Editor del Proyecto de CSS básico del modelo de cuadro, relleno y borde propiedades existen para todos los elementos, incluyendo la tabla de fila de tabla y de columna de elementos. Si finalmente se convierte en una recomendación de la W3C, html+css ejemplo, puede funcionar como se pretende en los navegadores en el pasado.

    • Yo estaría muy interesado en la razón como bien!
  3. 7

    dar el td relleno

    • Lo único que hay son si hay 2 td en el interior de un tr entonces habrá relleno entre el 2 td, que yo no quiero.
  4. 3

    Opción 1

    También se podría resolver mediante la adición de un transparente de la frontera a la fila (tr), como este

    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 como un encanto, aunque si necesidad de regular las fronteras, entonces este método, por desgracia, no funciona.

    Opción 2

    Desde las filas de la ley como una forma de grupo de células, la manera correcta de hacerlo, sería el uso de

    table {
        border-collapse: inherit;
        border-spacing: 0 10px;
    }
  5. 1

    Este es un viejo post, pero he pensado que debo publicar mi de la solución de un problema similar a los que me enfrentaba recientemente.

    Respuesta : he resuelto este problema mediante la visualización de la tr elemento como un bloque elemento decir, la especificación de CSS de display:block para la tr elemento. Usted puede ver esto en el siguiente ejemplo de código.

    HTML:

    <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.

    • Esta totalmente los tornillos con la forma de disposición de mesa normalmente funciona. Si usted hace esto, usted no debería estar usando una tabla de uso regular div.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea