Long HTML Table always starts on new page - html

Question

I have an HTML document that will be printed. It's an SDOCS template that grabs Salesforce record details and merges them into the document.
The page starts with some text in a div and then is followed by a html table. The table is varying lengths - it depends on which Salesforce record it is based upon.
When the table is short, the document displays properly. But, when the table is long, it bumps to the next page. I don't want it to do that, I would like it to follow immediately after the inital text, regardless of its length.
This is what I want to see:
Screenshot - What I want to see
But here is what I'm getting right now:
Screenshot - What I'm seeing
In the second screenshot, the table starts on the next page.
I've tried leveraging the css page-break-inside: avoid but it hasn't helped. Below is the HTML of my template:
<style type="text/css">.page {
width: 8.5in;
height: 11in;
}
div {
page-break-before: avoid;
}
.targetSupportTable td th {
padding:5px;
}
.wrapper {
padding: 0in;
color: #1a1a1a;
}
.bg {
position: absolute;
}
.bg img {
width: 99.5%;
}
.addressBlock{
position:absolute;
text-transform: uppercase;
padding-left:1.25in;
padding-top:9.4in;
font-size:14px;
font-family: Arial Unicode MS, sans-serif;
max-width: 3in;
/*overflow-wrap: break-word;
hyphens: auto;*/
}
.targetSupport {
background-color: #E5E5E5;
text-align: left;
width: 4in;
margin-left: 3in;
margin-top: 0in;
padding: 5px;
position: absolute;
font-family: Arial Unicode MS, sans-serif;
font-size: 15px;
}
.tartgetSupportTable {
border-collapse: collapse;
}
.statementBlock {
text-align: left;
width: 4.5in;
margin-left: 3in;
margin-top: 0in;
position: absolute;
font-family: Arial Unicode MS, sans-serif;
font-size: 15px;
}
.totalDonations {
text-align: left;
width: 2in;
margin-left: 0in;
margin-top: 0in;
position: absolute;
font-family: Arial Unicode MS, sans-serif;
font-size: 15px;
font-weight:bold;
}
.maaHeader {
text-align: left;
width: 8.5in;
font-family: Arial Unicode MS, sans-serif;
font-size: 22px !important;
border-bottom: 1px solid !important;
}
.transactions {
text-align: left;
width: 8.5in;
margin-left: 0in;
margin-top: 1in;
position: absolute;
font-family: Arial Unicode MS, sans-serif;
font-size: 12px;
}
.email {
position:absolute;
padding-left:5.4in;
padding-top:9.02in;
font-size:12px
}
.letter {
padding-left: 1in;
padding-top: 2in;
padding-right: 1in;
position: absolute;
font-size: 14px;
}
.table214 td {vertical-align: top !important;}
.table214col4 {text-align:right!important}
.table224col4 {text-align:right!important}
.table214 tr > td {
padding-bottom: 1em;
}
.table214 tr > th {
font-weight: 900 !important;
}
table.table214 {
border-collapse:collapse;
border-spacing:0px;
font-family:Arial Unicode MS,sans-serif;
font-size:10pt;
width:100%;
}
table.table224 {
border-collapse:collapse;
border-spacing:0px;
font-family:Arial Unicode MS,sans-serif;
font-size:10pt;
width:100%;
}
.table214col5{text-align:right;}
.table224col5{text-align:right;}
.table214header {
text-align:left;
font-weight: 900 !important;
color:#000000;
font-size:10px;
padding-bottom: 5px;
}
.table214footer {
text-align:right;
font-weight:bold;
height: 30px}
.openingBalance {
width: 7.5in;
text-align:right;
}
.exchangeRate {
width: 7.5in;
text-align:center;
}
</style>
<!--{{!<LineItemsSOQL>
<class>none</class>
<queryname>closingBalance</queryname>
<soql>
SELECT sum(amount__c) FROM Transactionv2__c WHERE ecaRecipient__c = '{{!eca__c.id}}' AND transactionDate__c >= {{!ECA__c.firstDayOfStatementYear__c}} AND transactiondate__c <= {{!eca__c.statementtodate__c}}
</soql>
</LineItemsSOQL>}}--><!--{{!<LineItemsSOQL>
<class>none</class>
<queryname>donationTotal</queryname>
<soql>
SELECT sum(amount__c) FROM Transactionv2__c WHERE ecaRecipient__r.account_no_string__c = '{{!eca__c.account_no_string__c}}' AND transactiondate__c >= {{!eca__c.statementfromdate__c}} AND transactionDate__c <= {{!eca__c.statementtodate__c}} AND (Donor__c != null OR (intermissionSharing__c = true AND amount__c > 0))
</soql>
</LineItemsSOQL>}}--><!--{{!<LineItemsSOQL>
<class>none</class>
<queryname>personalTransCount</queryname>
<soql>
SELECT count(id) FROM Transactionv2__c WHERE ecaRecipient__c = '{{!eca__c.id}}' AND Restriction__c = 'Pers_Reg' AND transactionDate__c >= {{!eca__c.statementfromdate__c}} AND transactiondate__c <= {{!eca__c.statementtodate__c}}
</soql>
</LineItemsSOQL>}}--><!--{{!<LineItemsSOQL>
<class>none</class>
<queryname>personalOpeningBalance</queryname>
<soql>
SELECT sum(amount__c) FROM Transactionv2__c WHERE ecaRecipient__c = '{{!eca__c.id}}' AND Restriction__c = 'Pers_Reg' AND transactionDate__c >= {{!ECA__c.firstDayOfStatementYear__c}} AND transactiondate__c < {{!eca__c.statementfromdate__c}}
</soql>
</LineItemsSOQL>}}--><!--{{!<LineItemsSOQL>
<class>none</class>
<queryname>personalClosingBalance</queryname>
<soql>
SELECT sum(amount__c) FROM Transactionv2__c WHERE ecaRecipient__c = '{{!eca__c.id}}' AND Restriction__c = 'Pers_Reg' AND transactionDate__c >= {{!ECA__c.firstDayOfStatementYear__c}} AND transactiondate__c <= {{!eca__c.statementtodate__c}}
</soql>
</LineItemsSOQL>}}-->
<div class="page">
<div class="wrapper">
<div class="statementBlock"><!--RENDER='{{!eca__c.recipient_type__c}}'!= 'MEMB' --><span style="font-size:22;">{{!eca__c.name}}</span><br />
<!--ENDRENDER--> <strong>Statement period</strong>: {{!eca__c.statementfromdate__c MMMMM yyyy}}<br />
<strong>Account number</strong>: {{!eca__c.account_no_string__c}}<br />
<!--RENDER='{{!eca__c.recipient_type__c}}'== 'MEMB' --> <strong>Average support level</strong>: ${{!eca__c.averagemonthlysupport__c #,###}}<!--ENDRENDER--></div>
</div>
<!--RENDER='{{!eca__c.recipient_type__c}}'== 'MEMB' -->
<div class="totalDonations">Total Donations:<br />
<span style="font-size:20px">${{!donationTotal.expr0 #,###.##}}</span></div>
<!--ENDRENDER--><!--RENDER='{{!eca__c.recipient_type__c}}'!= 'MEMB' -->
<div class="totalDonations">Balance:<br />
<span style="font-size:20px">${{!closingBalance.expr0 #,###.##}}</span></div>
<!--ENDRENDER-->
<div class="transactions"><!-- START MINISTRY REGULAR SECTION --><!--RENDER=('{{!ministryClosingBalance.expr0}}'!= null || ('{{!ministryTransCount.expr0}}' != null && '{{!ministryTransCount.expr0}}'!= 0 ))-->
<div class="Min_Reg">
<div class="maaHeader">Ministry Regular Fund Activity</div>
<div class="openingBalance"><!--RENDER1='{{!eca__c.statementfromdate__c}}'!= '{{!eca__c.firstdayofstatementyear__c}}' -->Opening balance: ${{!ministryOpeningBalance.expr0 #,###.##}} <!--ENDRENDER1--></div>
<!-- ******************** START RELATED LIST SECTION UNIQUEID:214********************-->
<table class="table214" style="width: 671px; page-break-inside: avoid !important; page-break-before: auto !important;">
<tbody>
<tr>
</tr>
<tr>
<th class="table214header" style="width: 10%;">date</th>
<th class="table214header" style="width: 30%;">description</th>
<th class="table214header" style="width: 30%;">comment</th>
<th class="table214header" style="width: 10%;">mode</th>
<th class="table214header" style="width: 10%;">USD</th>
<th class="table214header" style="width: 10%;">amount</th>
</tr>
</tbody>
<tbody style="page-break-inside: avoid !important; page-break-before: auto !important;"><!--{{!
<lineitemsSOQL><class>table214</class>
<listname>feeds</listname>
<soql>
SELECT transactiondate__c, descriptionForPdfStatements__c, Memo2__c,donationMode__c, USD__c, Amount__c FROM Transactionv2__c WHERE ecaRecipient__r.id = '{{!eca__c.id}}' AND transactiondate__c >= {{!eca__c.statementfromdate__c}} AND transactionDate__c <= {{!eca__c.statementtodate__c}} AND restriction__c = 'Min_Reg' order by transactionDate__c asc</soql>
<column format-date="MMM d">transactiondate__c</column>
<column type="rtf">descriptionForPdfStatements__c</column>
<column>memo2__c</column>
<column>donationMode__c</column>
<column>USD__c</column>
<column>amount__c</column>
</lineitemsSOQL>
}}-->
</tbody>
</table>
<div class="openingBalance" style="border-bottom: 1px solid !important;">Closing balance: ${{!ministryClosingBalance.expr0 #,###.##}}</div>
<br />
<!-- ******************** END RELATED LIST SECTION UNIQUEID:214********************--></div>
<!--ENDRENDER-->
<!-- START PERSONAL REGULAR SECTION2 --><!--RENDER=('{{!personalClosingBalance.expr0}}'!= null || ('{{!personalTransCount.expr0}}' != null && '{{!personalTransCount.expr0}}'!= 0 ))-->
<div class="Min_Reg">
<div class="maaHeader">Personal Regular Fund Activity</div>
<div class="openingBalance"><!--RENDER1='{{!eca__c.statementfromdate__c}}'!= '{{!eca__c.firstdayofstatementyear__c}}' -->Opening balance: ${{!personalOpeningBalance.expr0 #,###.##}} <!--ENDRENDER1--></div>
<!-- ******************** START RELATED LIST SECTION UNIQUEID:214********************-->
<table class="table214" style="width: 671px; page-break-inside: avoid !important; page-break-before: auto !important;">
<tbody>
<tr>
</tr>
<tr>
<th class="table214header" style="width: 10%;">date</th>
<th class="table214header" style="width: 30%;">description</th>
<th class="table214header" style="width: 30%;">comment</th>
<th class="table214header" style="width: 10%;">mode</th>
<th class="table214header" style="width: 10%;">USD</th>
<th class="table214header" style="width: 10%;">amount</th>
</tr>
</tbody>
<tbody style="page-break-inside: avoid !important; page-break-before: auto !important;">
<!--{{!
<lineitemsSOQL><class>table214</class>
<listname>feeds</listname>
<soql>
SELECT transactiondate__c, descriptionForPdfStatements__c, Memo2__c,donationMode__c, USD__c, Amount__c FROM Transactionv2__c WHERE ecaRecipient__r.id = '{{!eca__c.id}}' AND transactiondate__c >= {{!eca__c.statementfromdate__c}} AND transactionDate__c <= {{!eca__c.statementtodate__c}} AND restriction__c = 'Pers_Reg' order by transactionDate__c asc</soql>
<column format-date="MMM d">transactiondate__c</column>
<column type="rtf">descriptionForPdfStatements__c</column>
<column>memo2__c</column>
<column>donationMode__c</column>
<column>USD__c</column>
<column>amount__c</column>
</lineitemsSOQL>
}}-->
</tbody>
</table>
<div class="openingBalance" style="border-bottom: 1px solid !important;">Closing balance: ${{!personalClosingBalance.expr0 #,###.##}}</div>
<br />
<!-- ******************** END RELATED LIST SECTION UNIQUEID:214********************--></div>
<!--ENDRENDER-->
<br />
<!-- ******************** END RELATED LIST SECTION UNIQUEID:224********************-->
<div class="exchangeRate">Rates for converting USD amounts to CAD amounts on MEC claim forms:<br />
{{!eca__c.exchangeratefooter__c}}</div>
</div>
</div>