Odoo qweb invoice report pdf template table height and invoice line vertical alignment

Question

I am creating a custom invoice template in Odoo and I need the invoice line table to take up most of the screen even if it has only a few invoice lines. Here's the code for the table:

                    <table class="cr-table" style="height:200px;margin-top:0px">
                    <thead class="cr-th">
                        <tr>
                            <th>Your Item #</th>
                            <th>Product Description</th>
                            <th class="text-right">U of M</th>
                            <th class="text-right">Qty Ordered</th>
                            <th class="text-right">Qty Shipped</th>
                            <th class="text-right">Unit Price</th>
                            <th class="text-right">Amount</th>
                        </tr>
                    </thead>
                    <tbody class="cr-tbody" style="height:100%">
                    <tr>
                        <td colspan="7">
                            <span t-field="o.pre_text"/>
                        </td>
                    </tr>
                    <tr t-foreach="o.invoice_line" t-as="l">
                        <td><span t-field="l.product_id.default_code"/></td>
                        <td><span t-field="l.name"/></td>
                        <td class="text-right"><span t-field="l.uos_id"/></td>
                        <td class="text-right"><span t-field="l.quantity_ordered"/></td>
                        <td class="text-right"><span t-field="l.quantity"/></td>
                        <td class="text-right">
                            <span t-field="l.price_unit"/>
                                <!-- t-field-options='{“digits”:5}'/> -->
                        </td>
                        <td class="text-right" groups="sale.group_discount_per_so_line"><span t-field="l.discount"/></td>
                        <td class="text-right">
                            <span t-field="l.price_subtotal"/>
                                <!-- t-field-options='{"widget": "monetary"}'/>  -->
                                <!-- "display_currency": "o.currency_id" -->
                        </td>
                    </tr>
                    <tr>
                        <td colspan="7">
                            <span t-field="o.post_text"/>
                        </td>
                    </tr>
                    </tbody>
                </table>

Setting height in % does nothing, min-height does nothing, height in pixels works, however I need the invoice lines to align to the top, because in the current state they just spread evenly across the whole table, I need them to have the same spacing between them no matter how many invoice lines there are. Also, from what I've tried it seems qweb does not support css3, is this true?

Answer 1

Add the following to your css:

table.cr-table tbody tr:last-child
{
    height:100%;
}