This question has been flagged
1 Reply
6722 Views

I have created this table in my Qweb report and as you can see this table has borders. But how can I remove border for <tfoot element only? It should be bordered on <thead and <tbody. Do I need to do it with custom CSS somehow?

<table style="border-color:grey;" class="table-bordered table-sm o_main_table" name="moves_table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Description</th>
                            <th class="text-center">Code</th>
                            <th class="text-right">Units</th>
                            <th class="text-right">Quantity</th>
                            <th class="text-right">Package quantity</th>
                            <th class="text-right">Net weight (kg)</th>
                            <th class="text-right">Weight incl. packaging</th>
                            <th class="text-right">Type of package</th>
                        </tr>
                    </thead>
                    <tbody class="invoice_tbody">
                        <tr t-foreach="o.move_ids_without_package" t-as="l">
                            <td class="text-center">
                                <span t-esc="l_index + 1" />
                            </td>
                            <td>
                                <span t-field="l.name"/>
                            </td>
                            <td>
                                <span t-field="l.product_id.default_code"/>
                            </td>
                            <td class="text-right">
                                <span t-field="l.product_uom.name"/>
                            </td>
                            <td class="text-right">
                                <span t-esc="'%.2f'%(l.product_uom_qty)"/>
                            </td>

                            <td class="text-right">
                                <span t-esc="'%.2f'%(l.product_uom_qty)"/>
                            </td>
                            <td class="text-right">
                                <span t-esc="'%.2f'%(l.product_uom_qty)"/>
                            </td>
                            <td class="text-right">
                                <span t-esc="'%.2f'%(l.product_uom_qty)"/>
                            </td>
                            <td class="text-right">
                                <span t-esc="'%.2f'%(l.product_uom_qty)"/>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td class="text-right"><span><strong>Total amount</strong></span></td>
                            <td class="text-right"><span t-esc="sum(o.move_ids_without_package.mapped('product_uom_qty'))"/></td>
                            <td class="text-right"><span t-esc="sum(o.move_ids_without_package.mapped('product_uom_qty'))"/></td>
                            <td class="text-right"><span t-esc="sum(o.move_ids_without_package.mapped('product_uom_qty'))"/></td>
                            <td class="text-right"><span t-esc="sum(o.move_ids_without_package.mapped('product_uom_qty'))"/></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td class="text-right"><span><strong>Total Weight</strong></span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td class="text-right"><span t-esc="sum(o.move_ids_without_package.mapped('product_uom_qty'))"/></td>
                        </tr>
                    </tfoot>
                </table>


Avatar
Discard
Best Answer

Hi,

You need to add new css file like below:

<template id="assets_common" name="no_foot_border" inherit_id="web.report_assets_common">
<xpath expr="." position="inside">
<link href="/your_folder_name/static/src/css/table_report_css.css" rel="stylesheet"/>
</xpath>
</template>

In the css file:

.table-bordered.grey {
border-color:grey;
}

.table-bordered.no-footer tfoo tr{
border: border: none;
}

.table-bordered.no-footer-border tfoo td{
border: border: none;
}

Make your table as below class

<table class="table-bordered table-sm o_main_table gray no-footer" name="moves_table">

Regards

Avatar
Discard