space before a table ONLY IF the table is printed - html

Question

I'm creating a report card for grades K-6 which prints certain tables based on the student's grade. For example, a 5th grader wouldn't have "Reading Stage" displayed on the report card, but a 1st grader would. I've got the styles formatted correctly to conditionally print the tables, but it's the spacing in between the tables I'm struggling with.
I want there to be a standard amount of space between tables, so I've tried things like adding a blank row as the first row of the table, or adding margin-top=50pt. Everything I've tried results in space added for ALL tables, even the hidden ones, so there is sometimes 200 points of dead space between tables. Not good.
I need a (creative) way to conditionally add space ONLY IF the table is going to be printed.

Answer 1

I'm unsure as to how you're hiding your tables. If you hide them via the HTML5 hidden attribute or display: none, no top margin would interfere with your layout.
If for some reason you can't hide your content in one of these ways, CSS negation could be helpful. In this example, I'm saying that all tables not of a certain class should have margin-top: 1em.
table:not(.skip) {
margin-top: 1em;
}
.skip {
position: relative;
background-color: yellow;
}
.skip::after {
position: absolute;
top: 3px;
left: 150%;
content: ' <-- no margin-top';
white-space: nowrap;
}
<table>
<tr>
<td>table</td>
</tr>
</table>
<table class="skip">
<tr>
<td>table</td>
</tr>
</table>
<table>
<tr>
<td>table</td>
</tr>
</table>
<table class="skip">
<tr>
<td>table</td>
</tr>
</table>
<table>
<tr>
<td>table</td>
</tr>
</table>

Answer 2

I know the above has already answered but were you aware of #media print css? You could add some conditional print css that would only be applied when you are printing.
// only for testing, you can print normally without this. It is just for stackoverflow testing...
$("#testPrint").on("click", function() {
window.print();
});
#media print {
/* styles go here */
.myTables {
background: orange !important;
margin: 100px !important;
border: 1px solid black !important;
width: 500px;
}
}
.myTables {
background: pink;
border-collapse: collapse;
border: 1px dashed black;
padding: 5px;
margin: 5px;
text-align: center;
}
<!-- you dont need this javascript either -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="wrapper">
<table class='myTables'>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
</table>
<table class='myTables'>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
</table>
<table class='myTables'>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
</table>
</div>
<button id="testPrint">TEST PRINT</button>