2012-09-10 26 views
5

Cuando hay un html con una tabla y desea imprimirlo, la tabla puede dividirse o no según la longitud de la tabla. Si se divide hay una manera de repetir la cabecera de la mesa, para hacer que se puede añadir:Imprimir tabla html con encabezado personalizado en páginas subsiguientes

thead { 
    display: header-table-group; 
} 

Lo que quiero hacer es saltarse la primera página, por lo que la cabecera sólo se mostrará en las páginas subsiguientes .

¿Hay alguna manera de hacerlo?

+0

Would thead: first-child work? O la tabla realmente se divide en las etiquetas (es decir,

.....
....) – Lowkase

+0

No tengo idea de cómo se divide, porque eso es algo que hace el navegador y no me deja inspeccionar. Voy a intentarlo y responder – Hassek

+0

lamentablemente no funciona, pero fue un enfoque razonable. Gracias – Hassek

Respuesta

1

Si su <thead> tiene una altura fija, entonces es bastante fácil ocultarla en la primera página. Todo lo que tiene que hacer es anidar la tabla en div con overflow: hidden;, y luego agregar un margen superior negativo a la tabla para ocultar su encabezado.

Ejemplo:

<style> 
    .headless { 
    overflow: hidden; 
    line-height: 20px; 
    } 
    .headless > table { 
    margin-top: -22px; 
    border-spacing: 0; 
    } 
    .headless > table > * > tr > * { 
    border-right: 2px solid black; 
    border-bottom: 2px solid black; 
    padding: 0 4px 0 4px; 
    } 
    .headless > table > * > tr > :first-child {border-left: 2px solid black;} 
    .headless > table > thead > :first-child > th {border-top: 2px solid black;} 
</style> 

<div class="headless"> 
    <table> 
    <thead> 
     <tr> 
     <th>Header</th> 
     <th>Header</th> 
     <th>Header</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     </tr> 
     <tr> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Tenga en cuenta que la cabecera sólo se mostrará en las páginas subsiguientes en los navegadores que soportan la repetición de los encabezados de la tabla, que no incluye Chrome, Safari u Opera.

Cuestiones relacionadas