Intestazioni di stile stampate su ogni pagina

Question

Recentemente ho scoperto il codice CSS per consentire ai browser supportati di stampare blocchi <thead> nella parte superiore di ogni pagina (utilizzando display: table-header-group; in @media print {}). Questo semplifica enormemente il codice nella mia applicazione per la stampa di tabelle.

Tuttavia, il mio cliente è molto esigente riguardo gli stili. Sembra che i gruppi di intestazioni ristampati non presentino alcuni degli stili delle intestazioni originali, ovvero border-bottom-style e border-bottom-width per separare le intestazioni dal corpo della tabella. Dato che questo sembra essere un requisito difficile, mi piacerebbe un modo per essere in grado di includere questi stili con quei gruppi di intestazioni.

Ho provato diversi metodi per provare a forzare Firefox (il nostro browser di scelta) a stampare quegli stili per soddisfare questa condizione, ma nessuno di questi metodi sembra produrre i risultati desiderati. Alcuni esempi che ho provato:

@media print { 
    thead { 
     display: table-header-group; 
     border-bottom-style: solid; 
     border-bottom-width: 3px; 
    } 
} 

e

<thead style="border-bottom-style: solid; border-bottom-width: 3px;"></thead> 

e

table.class thead { 
    border-bottom-style: solid; 
    border-bottom-width: 3px; 
} 

e

table.class th { 
    border-bottom-style: solid; 
    border-bottom-width: 3px; 
} 

La mia domanda, allora: c'è un modo per impostare stili su questi gruppi di intestazione ristampati? Oppure il browser usa solo gli stili di intestazione di tabella predefiniti piuttosto spartani (testo in grassetto)?

Per favore perdonami se questa domanda è già stata fatta e ha risposto. Ho cercato in giro ma non ho trovato nulla su questo particolare problema. C'erano molte domande relative a display: table-header-group; ma nessuna riguardante lo styling di quei gruppi di intestazioni.

Answer 1

Impostazione del confine sulle celle della riga di intestazione sembra funzionare bene su Firefox 14:

@media print { 
    thead { 
     display: table-header-group; 
    } 
    thead th { 
     border-bottom-style: solid; 
     border-bottom-width: 3px; 
    } 
} 

Firefox non ha veramente bisogno la cosa display: table-header-group, ma altri browser potrebbe essere necessario, vedere la domanda CSS: Repeat table headers in print mode.