Page break not working with table - html

Question

I have tried the code below for page break after particular row of the table while printing. It didn't break the page. All rows appeared on the same page while printing.
.page-break {
page-break-after: always;
}
<tr class="page-break">
<td>--</td>
</tr>

Answer 1

Not sure you can use it on an <tr> (not a block level element)
"Applies to block-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements."
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after

Answer 2

You're missing the #media print. That media query is specific for when you're setting something to print.
https://www.w3schools.com/cssref/pr_print_pageba.asp
ANSWER UPDATE:
After some searching, #anderssonola is correct about not being able to use it with <tr>. So, you will have a couple options depending on how you've set up your page. The ones off the top of my head are below:
Option 1 = use <div> to break them apart.
For that you could do something like:
#media print {
div.page-break {page-break-after: always;}
}
<table>
<tr>
<td>Page One</td>
</tr>
</table>
<table>
<div class="page-break">
<tr>
<td>Page Two</td>
</tr>
</div>
</table>
Option 2 = use <table> to break them apart.
#media print {
.page-break {page-break-after: always;}
}
<table class="page-break">
<tr>
<td>Page One</td>
</tr>
</table>
<table class="page-break">
<tr>
<td>Page Two</td>
</tr>
</table>
Option 3 = use an HTML5 element to break them apart.
#media print {
section {page-break-after: always;}
}
<section>
Page One
</section>
<section>
Page Two
</section>