page-break-before: avoid; Why is there still a page break?

Question

I have a table element that is often very tall (it has many rows), and when the rendered browser print screen displays, there is always a page break between the header and the beginning of the table. This remains true upon physically printing the document.

I'd like to remove this page break, as it wastes a lot of space, unnecessarily. I tried using this code:

table {
    page-break-before: avoid;
}

... but to no avail. Is this the proper code? Or is there something else I should be using?

Please see the image below and notice the page break (the table is very tall but I only pasted the first five rows or so):

Answer 1

It is difficult from the sample you are sharing for us to know where the pagebreak is being expressed. All your attempt is doing is expressing to avoid pagebreak before the TABLE element. By the looks of your print sample, it would appear that your pagebreak is occurring either before the TABLE element or before the TH element. Again, we cant know for sure without seeing all the code. There could be some overriding css that expresses greater importance. There might ALSO be a pagebreak after the element preceding the table. Just for kicks, try doing it with the table and tr elements. Also try adding !important.

@media print {
  table {page-break-before: avoid !important;}
  tr {page-break-before: avoid !important;}
}