Customizing Invoice details in pdf

Support
1

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>
2

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

3

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}
2 Likes