How to make email-templates with a fixed-width for Iphone? If a width is longer than viewport - reduce the scale.
Now the issue I am having seems to be possibly with email sizing within Gmail Client on iOS on the iPhone. Although this template seems to look ok in all clients, the result I am getting in Gmail Client on Iphone looks compressed:
Email template rendering in Android:
Email template rendering in IOS(Iphone):
Html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Performance Scorecard</title>
</head>
<body>
<table width="640" border="0" cellpadding="0" cellspacing="3" style="font-family: 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px;">
<tr>
<td colspan="2" style="padding-bottom: 5px; text-align: left;">Hi <span>{FirstName}</span>,</td>
</tr>
<tr>
<td colspan="2" style="padding-bottom: 5px; text-align: left;">Your Performance Scorecard for the month of <span>{MonthAndYear}</span> is ready!</td>
</tr>
<tr>
<td width="180" align="left" style="width: 180px; border: 1px solid #CACACA; padding: 3px; border-radius: 5px">
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" style="width: 180px;">
<tr>
<td colspan="2" style="width: 100%; padding-bottom: 20px; padding-top: 3px; text-align: center;"><img src=cid:logoLR width="100"></td>
</tr>
<tr>
<td style="padding-right: 5px;"><img width="65" height="65" style="border-radius: 50%; overflow: hidden;" src=cid:{imgCId}></td>
<td>
<span style="font-size: 14px; font-weight: 500;">{UserName}</span><br /><span style="font-size: 12px; color:#BDBDBD;">{JobTitle}</span><br /><span style="font-size: 12px; color:#BDBDBD;">{TenantName}</span>
</td>
</tr>
<tr>
<td style="font-weight: bold; font-size: 24px; padding-top: 15px; text-align: center;">
<span>{AverageRating}</span>
</td>
<td style="padding-top: 15px;">
<table cellspacing="0" cellpadding="0" border="0" style="font-size: 14px;">
<tr>
<td style="text-align: right; padding-left: 7px;">{RatingsCount}</td>
<td style="padding-left: 5px;">Ratings</td>
</tr>
<tr>
<td style="text-align: right; padding-left: 7px;">{ReviewsCount}</td>
<td style="padding-left: 5px;">Comments</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 15px;">
<table cellpadding="0" border="0" style="width: 100%;">
<tr>
<td style="text-align: center;"><img width="30" height="30" src=cid:{firstStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{secondStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{thirdStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{fourthStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{fifthStar}></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="490" align="left" valign="middle" style=" width: 495px; border: 1px solid #CACACA; vertical-align: middle; padding: 3px; border-radius: 5px">
<table border="0" cellspacing="0" cellpadding="0" align="left" style="width: 100%;">
<tr>
<td>
<table cellpadding="0" cellspacing="3" border="0">
<tr>
{blockTemplate}
</tr>
</table>
<table cellspacing="3" cellpadding="0" style="width: 100%;">
<tr>
<td style="border: 1px solid #CACACA; padding: 3px;">
<table cellspacing="0" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td></td>
<td style="background-color: #95B3D7; border: 1px solid #B4C9E3; text-align: right; padding: 3px 5px; font-size: 11px;">{MonthAndYear}</td>
<td style="background-color: #95B3D7; border: 1px solid #B4C9E3; text-align: right; padding: 3px 5px; font-size: 11px;">Since Go-Live</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">Review Requests Sent</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{SurveysSentPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{SurveysSentAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">Review Requests Responded</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{SurveysRespondedPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{SurveysRespondedAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">Response Rate</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ResponseRatePastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ResponseRateAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">Online Review Site Redirects</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ReviewRedirectionsPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ReviewRedirectionsAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">Online Reviews Added</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ExternalReviewsAddedPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ExternalReviewsAddedAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #FFFF; padding: 3px 5px; font-size: 11px;">Conversion Rate</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ConversionRatePastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ConversionRateAddedAllTime}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
{blockComments}
<!-- end main -->
<tr>
<td colspan="2" style="padding-bottom: 5px; text-align: left;">Please click on this link to view your complete scorecard.</td>
</tr>
</table>
</body>
</html>
I have made a Email template for order confirmation.
It has a table,the table layout is fine on regular devices but on the gmail application on Phone the table layout is being disturbed.
The table border is going out of bound on the right side.
Here is my code for the email template:
<div style="text-align: center; margin: 0, auto; padding: 10px;">
<a href="http://brightopaints.com/" target="_blank">
<img src="http://brightopaints.com/wp-content/themes/brightoPaints/images/BrightoPaintlogo-2.png" alt="Brighto Paint" class="FollowBlockIcon" width="102" style="width: 102px; max-width: 102px;" />
</a>
</div>
<div style="max-width: 730px; background-color: #ebebeb; border-radius: 10px; text-align: center; margin: auto !important; padding-left: 24px; padding-right: 24px;">
<h1 style="color: #514f9e; padding: 15px; font-size: 48px; font-weight: 600;">THANK YOU!</h1>
<img src="http://brightopaints.com/wp-content/themes/brightoPaints/images/truck.png" width="250" style="width: 250px; max-width: 250px;" />
<h2 style="color: #000000; padding-top: 25px; font-size: 28px; font-weight: 500;">Your order is on its way.</h2>
<h2 style="color: #000000; padding-top: 25px; font-size: 18px; font-weight: 500;">this email confirms that we have received our order ". date('ymdHis')." placed on ".date('d-m-Y')."</h2>
<hr style="border: 1.2px solid black; margin-left: 30px; margin-right: 30px; margin-top: 40px;" />
<h2 style="color: #000000; padding-top: 12px; font-size: 36px; font-weight: 300;">shipping and billing details</h2>
<div style="border: 1px solid black; border-radius: 5px; margin: 24px; padding-left: 15px; padding-right: 15px;">
<table style="width: 100%; border-collapse: collapse; border-style: hidden; overflow-x: auto;">
<tbody>
<tr>
<td style="border: 2px solid white; padding: 8px;">User Name</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$person_name."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">User Email</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$person_email."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Contact Number</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$person_number."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Address</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$complete_address."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Product Name</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$product_name."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Product Shade</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$product_shade_name."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Type/Packaging</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$product_type_packaging."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Quantity</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$product_quantity."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Order Message</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$order_message."</td>
</tr>
</tbody>
</table>
</div>
<h2 style="color: #000000; padding-top: 12px; padding-left: 22px; font-size: 36px; font-weight: 300; text-align: left !important;">Total :</h2>
<h2 style="color: #000000; padding-top: 12px; padding-left: 22px; font-size: 20px; font-weight: 300; text-align: left !important;">subtotal :</h2>
<h2 style="color: #000000; padding-top: 62px; padding-left: 22px; padding-right: 22px; padding-bottom: 62px; font-size: 15px; font-weight: 500; text-align: center !important;">
if anything doesn't look right, simply contact us at our <span style="color: #537bed; text-decoration: underline;">Toll Free: 08000-1973</span> if it hasn't been dispatched, we will get it sorted right away.
</h2>
</div>
I have tried to use overflow:hidden; but then my content is cut off.
Here is what I am getting:
Use table-layout:fixed; for table and for all td to word-wrap:break-word;
NOTE:
I have added the word-wrap:break-word; ONLY for email due to inline css elements so please do the same for all other td.
<div style='text-align: center;margin: 0,auto;padding: 10px;'>
<a href='http://brightopaints.com/' target='_blank'><img src='http://brightopaints.com/wp-content/themes/brightoPaints/images/BrightoPaintlogo-2.png' alt='Brighto Paint' class='FollowBlockIcon' width='102' style='width:102px; max-width:102px;'></a>
</div>
<div style='max-width: 730px;background-color: #ebebeb;border-radius: 10px;text-align: center; margin: auto !important;padding-left: 24px;padding-right: 24px;'>
<h1 style='color: #514f9e;padding: 15px;font-size: 48px;font-weight: 600;'>THANK YOU!</h1>
<img src='http://brightopaints.com/wp-content/themes/brightoPaints/images/truck.png' width='250' style='width:250px; max-width:250px' />
<h2 style='color: #000000;padding-top: 25px;font-size: 28px;font-weight: 500;'>Your order is on its way.</h2>
<h2 style='color: #000000;padding-top: 25px;font-size: 18px;font-weight: 500;'>this email confirms that we have received our order ". date('ymdHis')." placed on ".date('d-m-Y')."</h2>
<hr style='border: 1.2px solid black;margin-left: 30px;margin-right: 30px;margin-top: 40px;'>
<h2 style='color: #000000;padding-top: 12px;font-size: 36px;font-weight: 300;'>shipping and billing details</h2>
<div style='border: 1px solid black;border-radius: 5px;margin: 24px;
padding-left: 15px;padding-right: 15px;'>
<table style='width: 100%;border-collapse: collapse;border-style: hidden;overflow-x:auto;table-layout:fixed;'>
<tbody>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>User Name</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$person_name."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>User Email</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px; word-wrap:break-word;'>dsfadsfasdfasdfsddsfadsfasdfasdfsdafasdfasdfadfadsfadsfasdfasdfsdafasdfasdfadfaafasdfasdfadfa#gmail.com</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Contact Number</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$person_number."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Address</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$complete_address."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Product Name</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$product_name."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Product Shade</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$product_shade_name."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Type/Packaging</td>
<td style='font-weight: bold !important; border: 2px solid white;
padding: 8px;'>".$product_type_packaging."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Quantity</td>
<td style='font-weight: bold !important; border: 2px solid white;
padding: 8px;'>".$product_quantity."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Order Message</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$order_message."</td>
</tr>
</tbody>
</table>
</div>
<h2 style='color: #000000;padding-top: 12px;padding-left: 22px; font-size: 36px;font-weight: 300; text-align: left !important;'>Total : </h2>
<h2 style='color: #000000;padding-top: 12px;padding-left: 22px;font-size: 20px;font-weight: 300;text-align: left !important;'>subtotal : </h2>
<h2 style='color: #000000;padding-top: 62px;padding-left: 22px;padding-right: 22px;padding-bottom: 62px;font-size: 15px;font-weight: 500;text-align: center !important;'>
if anything doesn't look right, simply contact us at our <span style='color: #537bed;text-decoration: underline;'>Toll Free: 08000-1973</span> if it hasn't been dispatched, we will get it sorted right away.
</h2>
</div>
How can I fix my margin and padding section in the email template to properly align my images in different columns ?
I have inserted a full image and also partial code below. Thank you.
<tr>
<td valign="top" align="middle" >
<table border="0" cellpadding="0" cellspacing="0" width="100%;
background-color: #ffffff; padding; 20px;">
<tr>
<td bgcolor="#ffffff" style="display: inline-block; max-width: 270px; width: 100%;" align="center">
<img src="https://i.postimg.cc/sgw9MVx8/jug.png" alt="" style="max-width: 268px; width: 100%" border: 1px solid: #d5d5d5 />
<h3 style="margin: 10px 0px; font-family: sans-serif; font-size: 20px; color: #000000" > Jug </h3>
<p style="margin: 0; font-size: 16px; color: #444444; margin-bottom: 10px; "> 10% discounts</p>
</td>
<td style="display: inline-block; max-width: 20px; width: 100%" >
</td>
<td bgcolor="#ffffff" style="display: inline-block; max-width: 270px; width: 100%;" align="center">
<img src="https://i.postimg.cc/CK9LqX9G/apple.jpg" alt="" style="max-width: 268px; width: 100%" border: 1px solid: #d5d5d5 />
<h3 style="margin: 10px 0px; font-family: sans-serif; font-size: 20px; color: #000000" > Apple </h3>
<p style="margin: 0; font-size: 16px; color: #444444; margin-bottom: 10px; "> 10% discounts</p>
</td>
</tr>
</table>
</td>
</tr>
Both Images resolution should be of the same size.
Unfortunately float Left does not work
I searched but not found a solution. My intention is to place the last box in the 2. row. Where is my mistake? Please zoom to 80% in the preview if you use the button "Run code snippet"
<body leftmargin="0" topmargin="6" marginheight="6" marginwidth="6" align="center" class="main" style="cursor: auto;">
<div style="position: relative;">
<div padding="4px" width="150" style="float: left; width: 150px; text-align: center; border: 1px solid black; background-color: white; padding: 4px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="left" cellpadding="4" cellspacing="1" text-align="left" style="width: 150%; margin-top: 4px; margin-left: 1px;">
<tbody>
<tr>
<th align="center" colspan="1">Lorem</th>
</tr>
<tr>
<td align="left">Loren <button>Ipsum</button></td>
</tr>
<tr>
<td align="left">Loren <button>Lorem</button></td>
</tr>
</tbody>
</table>
</div>
<div class="img-rounded" style="float: left; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;">
<table align="center" cellpadding="5" cellspacing="0" text-align="left">
<tbody>
<tr>
<th align="center" colspan="6" style="text-align: center;">Lorem ipsum lorem</th>
</tr>
<tr>
<td><input name="val" type="Radio" value="a">ipsum</td>
<td><input name="val" type="Radio" value="b">ipsum</td>
</tr>
<tr>
<td align="center" colspan="6"><button>Lorem</button></td>
</tr>
</tbody>
</table>
</div>
<div class="img-rounded" style="clear: both; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="12" cellspacing="12" text-align="center" style="margin-top: 3px;">
<tbody>
<tr>
<th align="center" colspan="2" style="text-align: center;">Lorem</th>
</tr>
<tr>
<td align="left">Lorem Lorem Lorem Lorem Lorem Lorem </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:lightgreen; clear: both; text-align: center; border: 1px solid black; padding: 4px; width: 150px; margin:
0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="2" cellspacing="0" text-align="left" style="margin-top: 4px;">
<tbody>
<tr>
<th align="center" colspan="3" style="text-align: center">I want to be in the second row</th>
</tr>
<tr>
<td><input name="freq_val" type="Radio" value="50">Please</td>
<td><input name="freq_val" type="Radio" value="60">Help</td>
</tr>
<tr>
<td align="center" colspan="3"><button>Thank You</button></td>
</tr>
</tbody>
</table>
</div>
<div style="position: absolute; top: 542px; left: 24px; width: 20px; height: 20px; text-align: center; visibility: hidden; background-color: red; border-radius: 6px;"></div>
<div style="position: absolute; top: 542px; left: 60px; width: 600px; height: 20px; text-align: left; visibility: hidden; background-color: white;">infos</div>
<span class="list-group-item" an_id " style="display: none; position: absolute; top: 720px; border: none;">
</span>
</div>
</body>
You had some clear: both; properties placed wrong, and a missing float: left; :)
<body leftmargin="0" topmargin="6" marginheight="6" marginwidth="6" align="center" class="main" style="cursor: auto;">
<div style="position: relative;">
<div padding="4px" width="150" style="float: left; width: 150px; text-align: center; border: 1px solid black; background-color: white; padding: 4px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="left" cellpadding="4" cellspacing="1" text-align="left" style="width: 150%; margin-top: 4px; margin-left: 1px;">
<tbody>
<tr>
<th align="center" colspan="1">Lorem</th>
</tr>
<tr>
<td align="left">Loren <button>Ipsum</button></td>
</tr>
<tr>
<td align="left">Loren <button>Lorem</button></td>
</tr>
</tbody>
</table>
</div>
<div class="img-rounded" style="float: left; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;">
<table align="center" cellpadding="5" cellspacing="0" text-align="left">
<tbody>
<tr>
<th align="center" colspan="6" style="text-align: center;">Lorem ipsum lorem</th>
</tr>
<tr>
<td><input name="val" type="Radio" value="a">ipsum</td>
<td><input name="val" type="Radio" value="b">ipsum</td>
</tr>
<tr>
<td align="center" colspan="6"><button>Lorem</button></td>
</tr>
</tbody>
</table>
</div>
<div class="img-rounded" style="clear: both; float: left; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="12" cellspacing="12" text-align="center" style="margin-top: 3px;">
<tbody>
<tr>
<th align="center" colspan="2" style="text-align: center;">Lorem</th>
</tr>
<tr>
<td align="left">Lorem Lorem Lorem Lorem Lorem Lorem </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:lightgreen; float: left; text-align: center; border: 1px solid black; padding: 4px; width: 150px; margin:
0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="2" cellspacing="0" text-align="left" style="margin-top: 4px;">
<tbody>
<tr>
<th align="center" colspan="3" style="text-align: center">I want to be in the second row</th>
</tr>
<tr>
<td><input name="freq_val" type="Radio" value="50">Please</td>
<td><input name="freq_val" type="Radio" value="60">Help</td>
</tr>
<tr>
<td align="center" colspan="3"><button>Thank You</button></td>
</tr>
</tbody>
</table>
</div>
<div style="position: absolute; top: 542px; left: 24px; width: 20px; height: 20px; text-align: center; visibility: hidden; background-color: red; border-radius: 6px;"></div>
<div style="position: absolute; top: 542px; left: 60px; width: 600px; height: 20px; text-align: left; visibility: hidden; background-color: white;">infos</div>
<span class="list-group-item" an_id " style="display: none; position: absolute; top: 720px; border: none;">
</span>
</div>
</body>
I have a task where I need to implement an invoice system that produces an HTML web page of the invoice, which is then printed to a PDF file.
The invoice that I'm outputing is shown in the following image.
What I now need to do is alter my code, so that it produces page breaks at the page boundaries to match the page size of my PDF output. Currently it does not do this, but instead just keeps printing an extended image across the pages that are printed.
Here is the HTML Code I'm currently using:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<style></style>
</head>
<body>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 52.0mm; left: 20.0mm; height: 5.0mm; width: 70.0mm;">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Das ist ein Text</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 57.0mm; left: 20.0mm; height: 30.0mm; width: 60.0mm;">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Das ist ein Test</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 100.0mm; left: 20.0mm; height: 7.0mm; width: 107.0mm;">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Headline</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 110.0mm; left: 20.0mm; height: 20.0mm; width: 178.0mm;">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Introduction Text</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 243.0mm; left: 20.0mm; height: 3.0mm; width: 170.0mm;">
<hr style="margin-top: 2mm; margin-bottom: 0mm; width: 170.0mm; border-color:#000000; height: 1.0mm" />
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 247.0mm; left: 20.0mm; height: 30.0mm; width: 70.0mm;page-break-after:auto ">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Footer1</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 247.0mm; left: 120.0mm; height: 30.0mm; width: 70.0mm;page-break-after:auto ">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Footer2</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 10.0mm; left: 140.0mm; height: 40.0mm; width: 50.0mm;">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Logo</span>
</div>
<div style="position: absolute; top: 150.0mm; left: 20.0mm; height: 50.0mm; width: 170.0mm; page-break-after:always;">
<table style="page-break-after:always;">
<tr style="page-break-after:always;">
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #005fbf">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Position</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Artikelnr</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Beschreibung</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Menge</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Preis (Netto)</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Preis (Brutto)</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Gesamtsumme (Netto):</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Gesamtpreis (Brutto)</strong>
</span>
</div>
</td>
</tr>
<tr>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">2</span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif"></span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif"></span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">1.0</span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">0</span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">0.0</span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">0.0</span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">0.0</span></td>
</tr>
</table>
</div>
</body>
</html>
please note I have trimmed down my sample code as it was too big for stack overflow
How can I make this code split cleanly on the correct page boundaries so that each of the table sections in my html appears as a closed box when I print the PDF out in the browser.
You can set an element a page break property.
page-break-after: auto|always|avoid|left|right|initial|inherit;
Or if you want to page break inside an element you can use the page-break-inside property.
page-break-inside: auto|avoid|initial|inherit;
Hope this helps!