improve html to improve performance of itextsharp - html

i´m converting HTML to PDF with itextsharp, i have improved the the code in itextsharp side, following this thread iTextSharp XMLWorker parsing really slow
but now i need to improve in html too. My goal is reach a time lowest than 0,1 seconds, i'm getting now 0,4 seconds
I don't know what are the rules in html side for a fatest rendering in itextsharp. In my HTML template basically i have style inline html and all is done with tables, here i let you the code
<html>
<head>
<title>DOCUMENT</title>
</head>
<body>
<!-- 2 -->
<table width="100%" cellspacing="0px" cellpadding="0px">
<tr>
<!-- DETALLE DE LECTURA/CONSUMO OK-->
<td width="60%" style="padding-right:5px" valign="top">
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="100%" style="border:1px solid #2F3640;background-color:#2F3640;color:#FFFFFF;font-weight:bold;padding: 2px 5px;font-size:10pt;">DETALLE DE LECTURA/CONSUMO</td>
</tr>
<tr>
<td>
<table width="100%" style="font-size:8pt;text-align:center" cellspacing="0px" cellpadding="0px" border="0">
<tr>
<td>Consumo Últimos 13 Meses (KWHs)</td>
</tr>
<tr>
<td width="100%">
<!-- GRAFICO DE CONSUMO -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<!--BARRAS-->
<tr>
<td width="100%">
<table width="100%" style="" cellspacing="0" cellpadding="0" align="left">
<tr style="font-size:5pt;height:130px;">
<!-- -->
<td style="font-size:5pt;width:4%"></td>
<!-- MES 1 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-1]</p>
<div style="width:100%; height:[valor-grafico-1-px]px; background-color:black">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 2 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-2]</p>
<div style="width:100%; height:[valor-grafico-2-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 3 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-3]</p>
<div style="width:100%; height:[valor-grafico-3-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 4 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-4]</p>
<div style="width:100%; height:[valor-grafico-4-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 5 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-5]</p>
<div style="width:100%; height:[valor-grafico-5-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 6 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-6]</p>
<div style="width:100%; height:[valor-grafico-6-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 7 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-7]</p>
<div style="width:100%; height:[valor-grafico-7-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 8 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-8]</p>
<div style="width:100%; height:[valor-grafico-8-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 9 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-9]</p>
<div style="width:100%; height:[valor-grafico-9-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 10 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-10]</p>
<div style="width:100%; height:[valor-grafico-10-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 11 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-11]</p>
<div style="width:100%; height:[valor-grafico-11-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 12 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-12]</p>
<div style="width:100%; height:[valor-grafico-12-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 13 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-13]</p>
<div style="width:100%; height:[valor-grafico-13-px]px; background-color:black">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:4%"></td>
</tr>
</table>
</td>
</tr>
<!-- EJE -->
<tr style="background-color:black; padding: 0; height: 1px">
<td colspan="26" nowrap="" >
<div></div>
</td>
</tr>
<!-- MESES -->
<tr>
<td width="100%">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size:5pt;" width="4%"></td>
<td style="font-size:5pt;" width="5%">[mes-1]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-2]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-3]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-4]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-5]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-6]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-7]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-8]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-9]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-10]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-11]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-12]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-13]</td>
<td style="font-size:5pt;" width="4%"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" style="font-size:8pt;">
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="50%">Datos consumo desde: [fecha-inicio-consumo]</td>
<td width="50%">hasta: [fecha-hasta-consumo]</td>
</tr>
<tr>
<td colspan="2" >
<table width="100%" style="font-size:10pt;text-align:center;" cellspacing="0px" cellpadding="0px">
<tr>
<th>Medidores</th>
<th>Lectura Actual</th>
<th>Lectura Anterior</th>
<th>Diferencia</th>
<th>Constante</th>
<th>KWH</th>
</tr>
<tr>
<td>[medidor-1]</td>
<td>[lectura-actual-1]</td>
<td>[lectura-anterior-1]</td>
<td>[diferencia-1]</td>
<td>[constante-1]</td>
<td>[kwh-1]</td>
</tr>
<tr>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
</tr>
<tr>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top:5px" colspan="2">
<table width="100%" style="font-size:8pt;text-align:right" cellspacing="0px" cellpadding="0px">
<tr>
<td width="80%" style="font-size:10pt;">Consumo Energia(KWH/mensual)</td>
<td width="20%" style="font-size:10pt;">[consumo-energia]</td>
</tr>
<tr>
<td width="80%" style="font-size:10pt;">Consumo Energia Invierno(KWH/mensual)</td>
<td width="20%" ="font-size:10pt;">[consumo-energia-invierno]</td>
</tr>
<tr>
<td width="80%">Potencia Contratada o Leída (KW)</td>
<td>[potencia-contratada]</td>
</tr>
<tr>
<td width="80%">Potencia Contratada o Leída Horas de Punta(KW)</td>
<td>[potencia-hora-punta]</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="40%">
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td align="center">
<img width="180px" src="http://localhost/FE.images/SEC.jpg" alt="sec"/>
</td>
</tr>
<tr>
<td>
<!-- ACUSE DE RECIBO -->
<table width="100%" style="font-size:8pt;">
<tr>
<td width="40%">Recinto:</td>
<td width="60%" style="border-bottom:1px solid black;"></td>
</tr>
<tr>
<td>Nombre:</td>
<td width="60%" style="border-bottom:1px solid black;"></td>
</tr>
<tr>
<td>Fecha:</td>
<td width="60%" style="border-bottom:1px solid black;"></td>
</tr>
<tr>
<td>RUT:</td>
<td width="60%" style="border-bottom:1px solid black;"></td>
</tr>
<tr>
<td colspan="2" style="border-bottom:1px solid black;">
<br/>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">FIRMA</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 3 -->
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="65%">
<table width="100%" style="padding-right:5px; font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td style="border:1px solid #2F3640;background-color:#2F3640;color:#FFFFFF;font-weight:bold;padding: 2px 5px;font-size:10pt;">
DETALLE DE LA CUENTA FACTURACION
</td>
</tr>
<tr>
<td>
<table width="100%" style="font-size:8pt;line-height:9pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="70%" style="font-size:10pt;" >Cargo fijo mensual</td>
<td width="30%" style="text-align:right;font-size:10pt;">$[cargo-fijo-mensual]</td>
</tr>
<tr>
<td style="font-size:10pt;">Cargo único del sistema troncal ([cantidad-energia] kWh)</td>
<td style="text-align:right;font-size:10pt;">$[cargo-unico]</td>
</tr>
<tr>
<td style="font-size:10pt;">Cargo por energía base ([cantidad-energia] kWh)</td>
<td style="text-align:right;font-size:10pt;">$[cargo-energia-base]</td>
</tr>
<tr>
<td style="font-size:10pt;">Cargo por energía adicional de invierno ([cantidad-energia] kWh)</td>
<td style="text-align:right;font-size:10pt;">$[cargo-energia-invierno]</td>
</tr>
<tr>
<td style="border-top:1px solid black;font-size:10pt;" width="70%">Reliquidaciones</td>
<td style="border-top:1px solid black;text-align:right;font-size:10pt;" width="30%">$[reliquidaciones]</td>
</tr>
<tr>
<td style="font-size:10pt;">Calibracion de medidor</td>
<td style="text-align:right;font-size:10pt;">$[calibracion-medidor]</td>
</tr>
<tr>
<td style="font-size:10pt;">Interés por mora</td>
<td style="text-align:right;font-size:10pt;">$[interes-mora]</td>
</tr>
<tr>
<td style="font-size:10pt;">Compensaciones</td>
<td style="text-align:right;font-size:10pt;">$[compensaciones]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-1]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-2]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-3]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-4]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-5]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-6]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-7]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-8]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-9]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-10]</td>
</tr>
<tr>
<td width="70%" style="border-top:1px solid black;padding-top:5px;font-size:10pt;">Total:</td>
<td width="30%" style="border-top:1px solid black;padding-top:5px;text-align:right;font-size:10pt;">$[total-pagar]</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- TOTALES -->
<td width="35%">
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="100%" align="left">
<table width="95%" style="font-size:8pt;border:2px solid black;" cellspacing="0px" cellpadding="0px">
<tr>
<th style="border-bottom:1px solid black;">DETALLE DE ABONOS</th>
</tr>
<tr>
<td>Total Abonados:</td>
<td></td>
</tr>
<tr>
<td>Fecha Abono:</td>
<td></td>
</tr>
<tr>
<td>Comprobante Caja №:</td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="50%" style="font-size:10pt;">Fecha vencimiento:</td>
<td width="50%" style="font-size:10pt;">[fecha-vencimiento]</td>
</tr>
<tr>
<td width="50%" style="font-size:10pt;">Fecha de corte de suministro:</td>
<td width="50%" style="font-size:10pt;">[fecha-corte]</td>
</tr>
<tr>
<td width="50%" style="font-size:10pt;">Último pago realizado:</td>
<td width="50%" style="font-size:10pt;">[fecha-ultimo-pago]</td>
</tr>
<tr>
<table width="100%" style="background-color:black;color:white;font-weight:bold;font-size:10pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="50%" >TOTAL:</td>
<td width="50%" style="background-color:black;color:white;font-weight:bold;font-size:10pt;";>[total-pagar]</td>
</tr>
</table>
</tr>
<tr>
<td align="center">
<img width="280px" src="#" alt="timbre"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>


I don't know if this has been addressed in the most recent version but as of 5.5.5 there was an issue in regards to the ImageProvider. If you don't explicitly set an ImageProvider iTextSharp will internally throw an exception, catch it and create an ImageProvider on your behalf. Unfortunately this can happen dozens or hundreds of times depending on how much HTML your are processing.
The quick fix is to just explicitly set your own ImageProvider. This can be just a simple so called "blank image provider" as shown here or you could make a more complex one.
Here's a VB.Net version:
Public Class BlankImageProvider
Implements IImageProvider
Public Function GetImageRootPath() As String Implements IImageProvider.GetImageRootPath
Return ""
End Function
Public Sub Reset() Implements IImageProvider.Reset
End Sub
Public Function Retrieve(src As String) As iTextSharp.text.Image Implements IImageProvider.Retrieve
Return Nothing
End Function
Public Sub Store(src As String, img As iTextSharp.text.Image) Implements IImageProvider.Store
End Sub
End Class
To use it you just need to bind it to your HtmlPipelineContext object using the SetImageProvider method:
htmlContext.SetImageProvider(New BlankImageProvider())
Also, I don't know if this factors in but your HTML is technically not accurate in several places. For instance, you are using px in your HTML attributes but in reality you can only use numbers or numbers with a percent sign. For instance, cellpadding="0px" is invalid and should be cellpadding="0". You also have at least one <table> tag that is directly a child of a <tr> but instead there should be an intermediary <td> or <th> tag. These things may or may not affect iTextSharp's speed but it might make things more future-proof to fix.

Related

Force page break after so many lines?

we're using Coldfusion and SQL and are trying to make a page with a query with only one tablr with one row and need it to force a page break after so many rows. We could also have it force a page break after 8x11 page is filled. I'm using a header and it will never show the header on page 2 sense it can't figure out where the page break is. Any help would be great.
Thanks
<head>
<script>
thead {
position: sticky;
top: 0px;
}
</script>
</head>
<thead>
<table width="100%" cellspacing="2" cellpadding="0" border="0" align="center" bgcolor="#CCCCCC" contenteditable="false">
<td bgcolor="#EDE9C6" width="5px">
<div align="center"><nobr><font size="-2">fmt</font></div>
</td>
<td style="overflow:hidden;" bgcolor="#EDE9C6" width="23px">
<div align="center"><strong><font size="-2"> <nobr> category </font></strong></div>
</td>
<td bgcolor="EDE9C6" width="20px">
<div align="center"><nobr><font size="-2"> SKU </font></div>
</td>
<td bgcolor="EDE9C6" width="25px">
<div align="center"><strong><nobr><font size="-2"> artist </font></strong></div>
</td>
<td bgcolor="EDE9C6" width="25px">
<div align="center"><nobr> <font size="-2"> title </font></div>
</td>
<td bgcolor="EDE9C6" width="5px">
<div align="center"><strong><nobr><font size="-2"><strong>qs </strong></font></strong></div>
</td>
<td bgcolor="EDE9C6" width="12px">
<div align="center"><nobr><font size="-2">fa </font></div></td>
<td bgcolor="EDE9C6" width="12px">
<div align="center"><strong><font size="-2"><strong>ts </strong> </font></strong></div>
</td>
<td bgcolor="EDE9C6" width="12px">
<div align="center"><nobr><font size="-2">wtd </font></div>
</td>
<td bgcolor="EDE9C6" width="12px"><div align="center"><strong><font size="-2">mtd </font></strong></div></td>
<td bgcolor="EDE9C6" width="12px"><div align="center"><font size="-2">ytd </font></div></td>
<td bgcolor="EDE9C6" width="20px">
<div align="center"><font size="-2"><strong>price</strong></font>
</div></td>
<td bgcolor="EDE9C6" width="15px">
<div align="center"><font size="-2">check</font>
</div></td>
</table></thead>
<table width="100%" cellspacing="2" cellpadding="0" border="0" align="center" bgcolor="#CCCCCC" contenteditable="false">
<tbody>
<cfoutput query="myquery">
<tr>
<td bgcolor="ffffff" width="5px">
<div align="center"><nobr><font size="-2">#fmt#</font></div>
</td>
<td style="overflow:hidden;" bgcolor="ffffff" width="50px">
<div align="center"><strong><nobr><font size="-2">#Left(catdesc,20)# </font></strong></div>
</td>
<td bgcolor="ffffff" width="20px">
<div align="center"><nobr><font size="-2">#fsku#</font></div>
</td>
<td bgcolor="ffffff" width="25px">
<div align="center"><strong><nobr><font size="-2">#Left(artist,25)# </font></strong></div>
</td>
<td bgcolor="ffffff" width="25px">
<div align="center"><nobr><em><font size="-2">#Left(title,25)#</font> </em></div>
</td>
<td bgcolor="ffffff" width="8px">
<div align="center"><strong><nobr><font size="-2">#fUpStkQty#</font> </strong></div>
</td>
<td bgcolor="ffffff" width="12px">
<div align="center"><nobr><font size="-2"><cfif #Fas# is not "">X<cfelseif #Fas# is ""> </cfif></font></div></td>
<td bgcolor="ffffff" width="12px">
<div align="center"><strong><font size="-2">#fStockQty#</font></strong> </div>
</td>
<td bgcolor="ffffff" width="12px">
<div align="center"><nobr><font size="-2">#fNSWTD1#</font></div>
</td>
<td bgcolor="ffffff" width="12px"><div align="center"><strong><font size="-2">#fNSMTD1#</font></strong></div></td>
<td bgcolor="ffffff" width="12px"><div align="center"><font size="-2">#fNSYTD1#</font></div></td>
<td bgcolor="ffffff" width="20px">
<div align="center"><strong><font size="-2">$#fcost#</font></strong>
</div></td>
<td bgcolor="ffffff" width="15px">
<div align="center"><font size="-2"> </font>
</div></td>
</cfoutput></tbody>
</table>

Inner table content not aligned with outer table

I am creating a table inside another table. I have divided the columns to be the exact same ratio as the outer table. However, the columns are not aligned with outer table columns. Can anyone tell me what I am missing?
<html>
<div style="overflow:scroll;height:140px;width:100%;overflow:auto" style="background-color:black">
<table width="100%" style="padding:0; margin:0;" cellpadding="0">
<tr class="tbl_header" cellpadding="0">
<td width="3%">test1</td>
<td width="7%">test2</td>
<td width="3%">test3</td>
<td width="12%">test4</td>
<td width="7%">test5</td>
<td width="10%"test6</td>
<td width="7%">test7</td>
</tr>
<tr style="background-color:yellow">
<td colspan="7" style="background-color:yellow">
<div style="overflow:scroll;height:110px;width:100%;overflow:auto;border:none;background-color:green">
<table width="100%" style="border:none;background-color:red" cellpadding="0">
<tr class="even">
<td width="3%">2</td>
<td width="7%" class="tdAlign">Testing </td>
<td width="3%" class="tdAlign">Testing </td>
<td width="12%" class="tdAlign">Testing Testing Testing</td>
<td width="7%">Testing_1</td>
<td width="10%">Testing_2</td>
<td width="7%">Testing_3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</html>

When I inspect the table with chromes web kit. I see that the tables with 3% then they are supposed to be, because of the text length. U can fix this by adding table-layout: fixed to both your <table> elements.
If U want to use a table header I suggest using <th> (see here)

<html>
<div style="overflow:scroll;height:140px;width:100%;overflow:auto" style="background-color:black">
<table width="100%" style="padding:0; margin:0;" cellpadding="0">
<tr class="tbl_header" cellpadding="0">
<td width="3%">test1</td>
<td width="7%">test2</td>
<td width="3%">test3</td>
<td width="12%">test4</td>
<td width="7%">test5</td>
<td width="10%">test6</td>
<td width="7%">test7</td>
</tr>
<tr style="background-color:yellow">
<td colspan="7" style="background-color:yellow">
<div style="overflow:scroll;height:110px;width:100%;overflow:auto;border:none;background-color:green">
<table width="100%" style="border:none;background-color:red" cellpadding="0">
<tr class="even">
<td width="3%">2</td>
<td width="7%" class="tdAlign">Testing </td>
<td width="3%" class="tdAlign">Testing </td>
<td width="12%" class="tdAlign">Testing Testing Testing</td>
<td width="7%">Testing_1</td>
<td width="10%">Testing_2</td>
<td width="7%">Testing_3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</html>
Looks like you missed a closing tag for a <TD>(<td width="10%">test6</td>). Hope this helps. Let me know

Force an element to take exactly half of available height in print media

I am dynamically creating elements (student bills) on a web page which I want to print.
I want this element to take only half of the total printable height in print media, so that I can print two elements on one page.
But in the picture, It's clear that some part of the third element is appearing on first page, which should actually go on the second page.
How can I force this element (one student's bill) to take exactly half of the height of the page?
<div class="col-md-6">
<div id="page-wrap">
<div style="clear:both"></div>
<div id="customer">
<div id="customer-title">
<table>
<tbody>
<tr>
<td style="text-align:center">
12017 </td>
<td style="text-align:center">
dfsdgf sdgsdg sdgsdg </td>
<td style="text-align:center">
1st </td>
</tr>
<tr>
<td style="text-align:center">
32817 </td>
<td style="text-align:center">
Sarika Godara </td>
<td style="text-align:center">
3rd </td>
</tr>
</tbody>
</table>
</div>
<table id="meta">
<tbody>
<tr>
<td class="meta-head">Bill #</td>
<td>149</td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td id="date">11-08-2017</td>
</tr>
<!--tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">Rs.</div></td>
</tr-->
</tbody>
</table>
</div>
<table id="items">
<tbody>
<tr>
<th colspan="1">Sr.No.</th>
<th colspan="4">Description</th>
<th colspan="1">Detail</th>
<th colspan="1">Sub-total</th>
</tr>
<tr>
<td colspan="1">1
</td>
<td colspan="4"> Tuition Fees(upto September)
</td>
<td colspan="1">2600 + 2750
</td>
<td colspan="1">5350
</td>
</tr>
<tr>
<td colspan="1">2
</td>
<td colspan="4"> AC
</td>
<td colspan="1">2450 + 2450
</td>
<td colspan="1">4900
</td>
</tr>
<tr>
<td colspan="1">3
</td>
<td colspan="4"> Transport Fees(upto September)
</td>
<td colspan="1">1650
</td>
<td colspan="1">1650
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Grand Total</td>
<td class="total-value">
<div id="total">Rs. 11900</div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Amount Paid</td>
<td class="total-value">Rs. 0</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line balance">Balance Due</td>
<td class="total-value balance">
<div class="due">Rs. 11900</div>
</td>
</tr>
</tbody>
</table>
<div id="terms">
<h5>Please Note</h5> आपने अपने बच्चे की फीस पेमेंट में बहुत देर कर दी है. कृपया जल्दी से जल्दी भुगतान करें.
</div>
</div>
</div>

Try this
add a div after every 2nd elements with page-break-after property
<div style="page-break-after:always"></div>
page-break-after property sets whether a page break should occur AFTER a specified element
DEMO

Gap between <tr>

I am creating a table that has 2 rows, that has different colors. There appears to be a gap between the rows and I want to close the gap, how can I do that?
<table width="100%">
<tr>
<td bgcolor="grey">
<table width="50%" style="margin:auto;">
<tr>
<td bgcolor="white" align="center">
<img src="">Test
</td>
</tr>
<tr>
<td align="center" bgcolor="#99CB55">
<img width="50%" src="xxx">
</td>
</tr>
</table>
</td>
</tr>
</table>
I need to use the css <style> because I'm sending this via Email (PHPMailer) and all the text will only be in HTML (+CSS using )

You can try table {border-spacing: 0; }
table {border-spacing: 0; }`
<table width="100%">
<tr>
<td bgcolor="grey">
<table width="50%" style="margin:auto;">
<tr>
<td bgcolor="white" align="center">
<img src="">Test
</td>
</tr>
<tr>
<td align="center" bgcolor="#99CB55">
<img width="50%" src="xxx">
</td>
</tr>
</table>
</td>
</tr>
</table>

Canvas inside table

I have a markup:
<table cellpadding="0" cellspacing="0" class="table_report_line">
<tbody>
<tr>
<td>
<div class="dvlefttable">
</div>
</td>
<td class="dvtoptable" colspan="4" width="100%">
Test
</td>
<td>
<div class="dvrighttable">
</div>
</td>
</tr>
<tr>
<canvas id="chartId" width="400" height="400" style="margin: 30px;">
</canvas>
</tr>
<tr>
<td>
</td>
<td colspan="4">
<br style="line-height: 15px;" />
</td>
<td>
</td>
</tr>
<tr>
<td colspan="6" class="bg_bottom_table">
</td>
</tr>
</tbody>
</table>
but when Firefox renders the page I see that it put canvas outside the table
<canvas id="chartId" style="margin: 30px;" height="400" width="400"> </canvas>
<table cellspacing="0" cellpadding="0" class="table_report_line">
<tbody>
<tr>
<td class="">
<div class="dvlefttable">
</div>
</td>
<td width="100%" colspan="4" class="dvtoptable">
Test
</td>
<td class="">
<div class="dvrighttable">
</div>
</td>
</tr>
<tr>
</tr>
<tr style="background: none repeat scroll 0% 0% transparent;">
<td class="td_border_left">
</td>
<td colspan="4" class="td_padding_left">
<br style="line-height: 15px;">
</td>
<td class="td_border_right">
</td>
</tr>
<tr>
<td class="bg_bottom_table" colspan="6">
</td>
</tr>
</tbody>
</table>
Why does it happen and how it possible to fix that?

You have to put the CANVAS inside of a TD element.
Change:
<tr>
<canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas>
</tr>
to:
<tr>
<td><canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas></td>
</tr>
General rule of thumb in cases like this is to use the HTML validator to see what you did wrong.