I recently discovered the CSS code to have supported browsers print <thead> blocks at the top of each page (using display: table-header-group; in @media print {}). This greatly simplifies the code in my application for printing tables.
However, my client is very picky about styles. It seems that the re-printed header groups lack some of the styles of the original headers, namely border-bottom-style and border-bottom-width to separate the headers from the table body. Since this seems to be a hard requirement, I would like a way to be able to include these styles with those header groups.
I've tried several different methods to try to force Firefox (our browser of choice) to print those styles to satisfy this condition, but none of these methods seem to produce the desired results. Some examples that I've 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, then: is there a way to set styles on these reprinted header groups? Or does the browser just use the rather spartan default table header styles (bold-faced text)?
Please forgive me if this question has already been asked and answered. I searched around but could not find anything about this particular issue. There were many questions dealing with display: table-header-group; but none regarding styling those header groups.
Setting the border on the cells of the header row seems to work ok on Firefox 14:
@media print {
thead {
display: table-header-group;
}
thead th {
border-bottom-style: solid;
border-bottom-width: 3px;
}
}
Firefox doesn't really need the display: table-header-group thing, but other browsers may need, see question CSS: Repeat table headers in print mode.