Print Format HTML Table unpredicted spacing

Frappe Framework Print Formats
1

Hi guys I am having a bug with wkhtmltopdf which is causing extra spacing in some cells which can be seen in row#12, row#24,
I checked and found Spacing is not from data, and not even in print preview but appearing in pdf somehow.

wkhtmltopdf: wkhtmltopdf 0.12.6 (with patched qt)
Frappe Framework: v15.27.0
ERPNext: v15.24.0

<div id="header-html">
    <div style="">
        <table width="100%" style="border: 2px solid black;">
            <tr>
                <td width="49%" style="border-right:2px solid black;">
                    <div>
                        <b>{{ _("Lade-Liste") }}</b><br>
                        {{ _("Test") }}<br>
                        {{ _("Kunde") }}: {{ doc.customer }}
                    </div>
                </td>
                <td width="23%"style="border-right:2px solid black;">
                    <div>
                        {{ _("BM = Bestell - Menge") }}<br>
                        {{ _("GM = Gelieferte - Menge") }}<br>
                        {{ _("OM = Offene - Menge") }}<br>
                    </div>
                </td>
                <td width="28%" style="border-right:2px solid black;">
                    <div>
                        {{ _("Datum") }}: {{ doc.get_formatted("delivery_date")}}<br>
                        {{ _("Seite:  {0}/{1}").format('<span class="page"></span>', '<span class="topage"></span>') }}
                    </div>
                </td>
            </tr>
        </table>
    </div>

</div>

<div>
    <table width="100%" class="table-bordered" >
        <thead>
            <tr>
                <td width="4%">{{ _("LS") }}</td>
                <td width="4%">{{ _("vst.") }}</td>
                <td width="13%">{{ _("Menge") }}</td>
                <td width="7%">{{ _("Palette") }}</td>
                <td width="8%">{{ _("Auftrag") }}</td>
                <td width="11%">{{ _("Intern") }}</td>
                <td width="14%">{{ _("Artikel-Nr.") }}</td>
                <td width="19%">{{ _("Charge") }}</td>
                <td width="5%">{{ _("BM") }}</td>
                <td width="5%">{{ _("GM") }}</td>
                <td width="5%">{{ _("OM") }}</td>
                <td width="5%">{{ _("Lief.Termin") }}</td>
            </tr>
        </thead>
        <tbody>
            {% for item in doc.items %}
            <tr>
                <td><div style="height: 68px;">{{ item.idx }}</div></td>
                <td></td>
                <td></td>
                <td></td>
                <td style="word-wrap:break-word;"><div style="width:40px">{{ doc.po_no or "" }}</div></td>
                <td style="word-wrap:break-word;"><div style="width:66px">{{ doc.name }}</div></td>
                <td style="word-wrap:break-word;"><div style="width:105px">{{ item.item_code }}</div</td>
                <td></td>
                <td>{{ item.get_formatted("qty") }}</td>
                <td>{{ item.get_formatted("delivered_qty") }}</td>
                <td>{{ frappe.utils.cint(item.qty - item.delivered_qty) }}</td>
                <td>{{ frappe.utils.get_datetime(doc.delivery_date).strftime("%d.%m.%y") }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

.print-format {
	font-family: 'ArialGreek';
	font-size: 3.5mm;
    padding-left: 6mm;
	padding-right: 6mm;
	margin-left: 0mm;
	margin-right: 0mm;
	margin-top: 33mm;
	margin-bottom: 1mm;
}

.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
    border: 2px solid black !important;
}

PDF link: AU25-0027.pdf - Google Drive

2

I’m not sure if it makes a difference but I’m happy with the following format. Notice use of “th” for “table header”.

<table style="width:100%;">
<thead>
    <tr style="border: 1px solid black; border-collapse: collapse;">
        <th style="border: 1px solid black; width: 20%; text-align: left;">Item</th>
        <th style="border: 1px solid black; width: 41%; text-align: left;">Description</th>
        <th style="border: 1px solid black; width: 12%; text-align: right;">QTY</th>
        <th style="border: 1px solid black; width: 10%; text-align: right;">Price</th>
        <th style="border: 1px solid black; width: 5%; text-align: right;">Disc</th>
        <th style="border: 1px solid black; width: 12%; text-align: right;">AMT</th>
    </tr>    
</thead>
{%- for row in doc.items -%}
<tr style="border: 1px solid black; border-collapse: collapse;">

    <td style="border: 1px solid black; text-align: left;">
        {{ row.item_code }}</td>
    <td style="border: 1px solid black; text-align: left;">
        {{ row.description }}</td>
    <td style="border: 1px solid black; text-align: right;">{{ row.qty }} {{ row.uom }}</td>
    <td style="border: 1px solid black; text-align: right;">{{
                "{:,.2f}".format(row.price_list_rate) }}</td>
     <td style="border: 1px solid black; text-align: right;"> {% if row.discount_percentage > 0 %} {{ "{:.0%}".format(row.discount_percentage / 100) }} {% else %} {{ '' }} {% endif %}</td>            
    <td style="border: 1px solid black; text-align: right;">{{
                "{:,.2f}".format(row.amount) }}</td>
    </tr>
    
    {%- endfor -%}
    </table>
1 Like