Style headings are printed on each page.

I recently discovered that CSS supports supported browsers, prints <thead>blocks at the top of each page (using display: table-header-group;in @media print {}). This greatly simplifies the code in my spreadsheet application.

However, my client is very picky about styles. It seems that the band re-printed titles have some style of original titles, namely border-bottom-styleand border-bottom-widthto separate the headers from the body of the table. Since this seems to be a tough requirement, I would like to be able to include these styles in these header groups.

I tried several different methods to get Firefox (our browser of choice) to print these styles to satisfy this condition, but none of these methods give the desired results. Some examples I tried:

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

and

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

and

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

and

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

My question is: then is there a way to set styles in these reissued header groups? Or does the browser just use pretty spartan default table header styles (bold)?

Please forgive me if this question has already been asked and answered. I searched around but couldn't find anything about this particular problem. There were many related questions, display: table-header-group;but none of them dealt with the styling of these heading groups.

+5
source share
1 answer

, , Firefox 14:

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

Firefox display: table-header-group, , . CSS: .

+3