remove bordering from <tfoot element

Question

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>

Answer 1

I suggest you do this the right way using css file, not style attributes because if you need this table, in another report you are going to repeat your self a lot and you are going to define style attribute in every td tag inside tfoo tag:

create and add css file to reports:

<template id="assets_common" name="Table 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 your table_report_css.css file use a special class to distinct your table no-footer-border and gray-border to make border gray:

/* notice the table should have this two class */
.table-bordered.gray-border {
    border-color:grey;
}

/* hide tr border inside tfoo I think this is not needed */
.table-bordered.no-footer-border tfoo tr{
      border: border: none;
}

/* hide border td border inside tfoo tag this is required */
.table-bordered.no-footer-border tfoo td{
      border: border: none;
}

Now in your template this two class to your table tag add table-bordered,gray-border and no-footer-border classes:

<!-- remove the style -->
<table class="table-bordered table-sm o_main_table gray-border no-footer-border" name="moves_table">

Note: don't forget to add the XML file that extends the report_assets_common to manifest, when you edit the css file no need to restart the server or upgrade your module. and this is for Odoo version >= 11.0, in < 11.0 the template of report assets is report.assets_common.