This is my code: How can I create table like pic above more simply. I try to use thead tr and th but it is not affected.
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h4> Danh Sách Khách Hàng (Table Basic, Table Hover)</h4>
<table class="table table-hover table-responsive table-bordered text-center">
<tbody>
<tr style="font-weight: bold;background-color: green;font-size: 20px;color:red">
<td class="middle" style="border-right:none;">Day</td>
<td class="middle" rowspan="2" style="border-right:none;border-left: none;">2</td>
<td class="middle" rowspan="2" style="border-right:none;border-left: none;">3</td>
<td class="middle" rowspan="2" style="border-right:none;border-left: none;">4</td>
<td class="middle" rowspan="2" style="border-right:none;border-left: none;">5</td>
<td class="middle" rowspan="2" style="border-right:none;border-left: none;">6</td>
<td class="middle" rowspan="2" style="border-right:none;border-left: none;">7</td>
<td class="middle" rowspan="2" style="border-right:none;border-left: none;">CN</td
</tr>
<tr>
<td class="middle">Course</td>
</tr>
<tr>
<td class="middle">AA</td>
<td class="middle">x</td>
<td class="middle"></td>
<td class="middle">x</td>
<td class="middle"></td>
<td class="middle"></td>
<td class="middle"></td>
<td class="middle"></td>
</tr>
</tbody>
</table>
</div>
Related
Please help me how to align this structure properly. I would like to decrease the size of td "Todays Special" to considerable height. This td grows based on my value say if new fruits added then the header td also grows.
Be kind to help me to resolve this
<table>
<tr>
<td class="title">Todays Special</td>
<td>
<div style="height: 120px; width:100%;overflow-y:auto;">
<table style="height: auto; width:100%;" valign="top">
<tbody>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">6</td>
<td colspan="4" class="title">mango</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">23</td>
<td colspan="4" class="title">orange</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">29</td>
<td colspan="4" class="title">banana</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">47</td>
<td colspan="4" class="title">papaya</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">11959</td>
<td colspan="4" class="title">kiwi</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
If you edit the "Todays Special" td, you can set the desired width and font-size through the style property of the td tag. And also set the alignment you want.
As you are not making a Table header from a row, you have to set different styles to the main td and the rest of the table.
Hope I helped.
Assuming you just want to match the height of the column Todays's Special. You can do this by adding the rowspan according to the no. of items in the list
<td class="title" rowspan="5">Todays Special</td>
<div>
<table style="height: auto;" valign="middle">
<tbody>
<tr>
<td class="title" rowspan="5">Todays Special</td>
<td class="title">6</td>
<td class="title">mango</td>
</tr>
<tr>
<td class="title">23</td>
<td class="title">orange</td>
</tr>
<tr>
<td class="title">29</td>
<td class="title">banana</td>
</tr>
<tr>
<td class="title">47</td>
<td class="title">papaya</td>
</tr>
<tr>
<td class="title">11959</td>
<td >kiwi</td>
</tr>
</tbody>
</table>
</div>
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
I am creating a table but I am having trouble in the last panel (Condition). I want the table have 2 rows but I have tried and failed, how to create in a 2 row colum?
likely this image
I tried everything but could not, you can explain it to me
Thank a lot
<table id="items">
<tr>
<th width="25%">Prestation</th>
<th width="10%">Prix Unitaire</th>
<th width="10%">Quantity</th>
<th width="10%">Montant</th>
<th width="45%">Condition</th>
</tr>
<tr class="item-row">
<td class="item-name">
<div class="delete-wpr"><input type="text" style="width: px; height: 47px;"><a class="delete" href="javascript:;" title="Remove row">X</a></div>
</td>
<td><input type="text" class="cost" style="width: 100px; height: 47px;"></td>
<td><input type="text" class="qty" style="width: 60px; height: 47px;"></td>
<td><span class="price"></span></td>
<tr class="condition">
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
</tr>
<tr>
<td colspan="1" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value">
<div id="subtotal"></div>
</td>
</tr>
<tr>
<td colspan="1" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value">
<div id="total"></div>
</td>
</tr>
<tr>
<td colspan="1" class="blank"> </td>
<td colspan="2" class="total-line">Montant payé</td>
<td class="total-value"><input type="text" id="paid" style="width: 50px; heigth: ;"></td>
</tr>
<tr>
<td colspan="1" class="blank"> </td>
<td colspan="2" class="total-line balance">Solde dû</td>
<td class="total-value balance">
<div class="due"></div>
</td>
</tr>
</table>
I am not sure about your question. If you mean, have one column in 2 row, try use rowspan="2" in tag <row> instead of colspan.
Colspan will stretch one column through columns.
Rowspan will
stretch one row through rows.
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.
I want to create a normal table. But I need to put two fields in one row.
So, I used rowspan and expected to have a two row table, but with a space of fourth.
But, it's showed in only one line.
I revised, and look for something wrong, but I dont unerstaing.
When I remove the rowspan, everything looks normal, but I need the rowspan.
Why is render in one row?
<table class="table table-bordered">
<tbody>
<tr class="warning" >
<td rowspan="2" >100</td>
<td rowspan="2">87</td>
<td rowspan="2">FERNANDO RODRIGUEZ</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Monterrey </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/100" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
<tr class="warning" >
<td rowspan="2" >101</td>
<td rowspan="2">82</td>
<td rowspan="2">IVAN CORTES</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Nissan Mexico </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/101" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
</tbody>
</table>
This is a picture of my app in action, and the reason of my question.
https://www.dropbox.com/s/1luaxgg4yesm8re/result.png
Replace the rowspans with colspans. For example:
<td colspan="2">
(...)
</td>
EDIT:
Still not 100% sure what you're trying to achieve but as far as I believe you might want to:
remove rowspan from all the td's that are meant to be two-rowed.
add and additional <tr></tr> after each tr and fill it with a number of tds equal to number of cells with rowspan.
I just had a similar problem, try adding an empty Row at the end of the missbehaving Row something like this:
<table class="table table-bordered">
<tbody>
<tr class="warning" >
<td rowspan="2" >100</td>
<td rowspan="2">87</td>
<td rowspan="2">FERNANDO RODRIGUEZ</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Monterrey </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/100" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
<tr /> <!--magic goes here-->
<tr class="warning" >
<td rowspan="2" >101</td>
<td rowspan="2">82</td>
<td rowspan="2">IVAN CORTES</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Nissan Mexico </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/101" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
<tr /> <!--magic goes here-->
</tbody>
</table>
It worked for me :)