从 <tfoot 元素中删除边框

Question

我在我的 Qweb 报告中创建了这个 table，你可以看到这个 table 有边框。但是我怎样才能只删除 <tfoot 元素的边框呢？它应该与 <thead 和 <tbody 接壤。我需要以某种方式使用自定义 CSS 吗？

<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

我建议您使用 css 文件而不是样式属性以正确的方式执行此操作，因为如果您需要此 table，在另一份报告中您将重复自己很多，并且您是将在 tfoo 标签内的每个 td 标签中定义 style 属性：

创建 css 文件并将其添加到报告中：

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

在你的 table_report_css.css 文件中使用特殊的 class 来区分你的 table no-footer-border 和 gray-border 使边框变灰：

/* 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;
}

现在在你的模板中，这两个 class 到你的 table 标签添加 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">

注意： 编辑 css 时，不要忘记添加扩展 report_assets_common 的 XML 文件以显示文件无需重新启动服务器或升级您的模块。这是 Odoo version >= 11.0，在 < 11.0 中，报告资产的模板是 report.assets_common。

从 <tfoot 元素中删除边框

remove bordering from <tfoot element

odoo

qweb