Styling headers printed on each page

Question

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.

Epigoni

Can you upload a complete example of something that fails to print properly? – Mirnamirror

As I noted in the comment below, the issue was another conflicting style on the table (specifically a border-collapse: collapse). I just switched to using cellspacing="0" and the issue was resolved. – Epigoni

Answer 1

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.

Halland

Thanks! I think I had some other CSS which was conflicting with that styling. I had set the table to use border-collapse: collapse, which for some reason allowed the bottom border to be printed for the first header group and none of the subsequent ones. I changed it to use cellspacing="0" in the <table> tags and that seemed to work. – Epigoni

Answer 2

I was having an issue where the table container would not break cleanly, even after making sure break-inside was not set. This was preventing the table from being split nicely into pages, and was preventing the header from being displayed on each page, even though thead {display: table-header-group;} was set. The cause was one of the parent divs of the table having display: inline-block set. Removing that, fixed it.

Defalcate