I have a huge amount of structured HTML that I need to convert to to be able to render it inside of pdfkit.
I'm using pdfkit and it seems it dosn't play well with layouts but does play well with grids.
Any help would be greatly appreciated!
<div class="row">
<div class="col-md-10">
<div class="col-md-3 left" style="padding: 20px 0 30px 0; color:#454545; font-family: Arial, sans-serif; font-size: 16px;">
Packages
</div>
<div class="col-md-9 left" style="padding: 20px 0 30px 0; color:#454545; font-family: Arial, sans-serif; font-size: 16px;">
<h4>User 1 </h4>
<div class="row">
<div class="col-md-6">
<p style="padding-left:20px">
Total records <br/>
Total cycles <br/>
Total records out <br/>
Consumable Costs<br/>
<br/>
Total Artwork Changes <br/>
Artwork Change Costs <br/>
<br/>
<span style="color:green;">Artwork Change Discount </span><br/>
Subtotal <br/>
Sales Tax 5.5%<br/>
<br/>
<span style="font-size:18px; font-weight:strong;">Total</span><br/>
</p>
</div>
<div class="col-md-6 left">
<p style="padding-left:20px;">
23,334 <br/>
2 <br/>
46,668 <br/>
$6,445.34<br/>
<br/>
7 <br/>
$700.00 <br/>
<br/>
<span style="color:green;">-$350.00</span><br/>
$6,795.34<br/>
$373.74<br/>
<br/>
<span style="font-size:18px; font-weight:strong;">$6,421.50</span>
<br/><br/>
</p>
</div>
</div>
<h4>User 2 </h4>
<div class="row">
<div class="col-md-6">
<p style="padding-left:20px">
Total records <br/>
Total cycles <br/>
Total records sent <br/>
Consumable Costs<br/>
<br/>
Total Artwork Changes <br/>
Artwork Change Costs <br/>
<br/>
<span style="color:green;">Artwork Change Discount </span><br/>
Subtotal <br/>
Sales Tax +5.5%<br/>
<br/>
<span style="font-size:18px; font-weight:strong;">Total</span><br/>
</p>
</div>
<div class="col-md-6 left">
<p style="padding-left:20px;">
23,334 <br/>
2 <br/>
46,668 <br/>
$6,445.34<br/>
<br/>
7 <br/>
$700.00 <br/>
<br/>
<span style="color:green;">-$350.00</span><br/>
$6,795.34<br/>
$373.74<br/>
<br/>
<span style="font-size:18px; font-weight:strong;">$6,421.50</span>
<br/><br/>
</p>
</div>
</div>
</div>
</div>
</div>
you can always use
#rootTable .row {display: table;}
#rootTable .row > [class^="col-"] {display: table-cell;}
in your css, Good luck.