Customizing Invoice details in pdf

Version: 1.6

Hello,

I am new to this amazing open source software, i am trying to reduce the table width in pdf generated. There is a huge tab space between variable name and the value. I have no idea how to fix this issue. Could someone help me?

I tried to add but it didnt work

image

 <div class="invoice-details clearfix">
        <table>
            <tr>
                <td><?php echo trans('invoice_date') . ':'; ?></td>
                <td><?php echo date_from_mysql($invoice->invoice_date_created, true); ?></td>
            </tr>
            <tr>
                <td><?php echo trans('due_date') . ': '; ?></td>
                <td><?php echo date_from_mysql($invoice->invoice_date_due, true); ?></td>
            </tr>
            <tr>
                <td><?php echo trans('amount_due') . ': '; ?></td>
                <td><?php echo format_currency($invoice->invoice_balance); ?></td>
            </tr>
            <?php if ($payment_method): ?>
                <tr>
                    <td><?php echo trans('payment_method') . ': '; ?></td>
                    <td><?php _htmlsc($payment_method->payment_method_name); ?></td>
                </tr>
            <?php endif; ?>
        </table>
    </div>

Adjust your <table> like so: <table border="1">, it will show you where the gap comes from.
Maybe you can apply responsiveclasses to your table. This is pure bootstrap css, what you need to use

Hey,
Thanks for the help.

The below modification in the custom-pdf.css worked fine.

.invoice-details table{
	border-collapse:collapse;
	border-spacing:0;
	text-align:right;
	width:30%;
	margin:0 0 0 auto;
	font-size:12px}
.invoice-details table td{
	width:40%;
	margin:0;
	padding:0 0 0.5em 0}
1 Like