diff --git a/addons/account/views/report_invoice.xml b/addons/account/views/report_invoice.xml
index 3a653d3b78f..75140895390 100644
--- a/addons/account/views/report_invoice.xml
+++ b/addons/account/views/report_invoice.xml
@@ -19,36 +19,36 @@
                         <span t-field="o.number"/>
                     </h2>
 
-                    <div class="row mt32 mb32">
-                        <div class="col-auto" t-if="o.name" name="description">
+                    <div id="informations" class="row mt32 mb32">
+                        <div class="col-auto mw-100 mb-2" t-if="o.name" name="description">
                             <strong>Description:</strong>
-                            <p t-field="o.name"/>
+                            <p class="m-0" t-field="o.name"/>
                         </div>
-                        <div class="col-auto" t-if="o.date_invoice" name="invoice_date">
+                        <div class="col-auto mw-100 mb-2" t-if="o.date_invoice" name="invoice_date">
                             <strong>Invoice Date:</strong>
-                            <p t-field="o.date_invoice"/>
+                            <p class="m-0" t-field="o.date_invoice"/>
                         </div>
-                        <div class="col-auto" t-if="o.date_due and o.type == 'out_invoice' and o.state in ('open', 'in_payment', 'paid')" name="due_date">
+                        <div class="col-auto mw-100 mb-2" t-if="o.date_due and o.type == 'out_invoice' and o.state in ('open', 'in_payment', 'paid')" name="due_date">
                             <strong>Due Date:</strong>
-                            <p t-field="o.date_due"/>
+                            <p class="m-0" t-field="o.date_due"/>
                         </div>
-                        <div class="col-auto" t-if="o.origin" name="origin">
+                        <div class="col-auto mw-100 mb-2" t-if="o.origin" name="origin">
                             <strong>Source:</strong>
-                            <p t-field="o.origin"/>
+                            <p class="m-0" t-field="o.origin"/>
                         </div>
-                        <div class="col-auto" t-if="o.partner_id.ref" name="customer_code">
+                        <div class="col-auto mw-100 mb-2" t-if="o.partner_id.ref" name="customer_code">
                             <strong>Customer Code:</strong>
-                            <p t-field="o.partner_id.ref"/>
+                            <p class="m-0" t-field="o.partner_id.ref"/>
                         </div>
-                        <div name="reference" class="col-auto" t-if="o.reference">
+                        <div name="reference" class="col-auto mw-100 mb-2" t-if="o.reference">
                             <strong>Reference:</strong>
-                            <p t-field="o.reference"/>
+                            <p class="m-0" t-field="o.reference"/>
                         </div>
                     </div>
 
                     <t t-set="display_discount" t-value="any([l.discount for l in o.invoice_line_ids])"/>
 
-                    <table class="table table-sm" name="invoice_line_table">
+                    <table class="table table-sm o_main_table" name="invoice_line_table">
                         <thead>
                             <tr>
                                 <t t-set="colspan" t-value="6"/>
@@ -75,7 +75,7 @@
                                 <t t-set="current_subtotal" t-value="current_subtotal + line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
                                 <t t-set="current_subtotal" t-value="current_subtotal + line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
 
-                                <tr t-att-class="'bg-200 font-weight-bold' if line.display_type == 'line_section' else 'font-italic' if line.display_type == 'line_note' else ''">
+                                <tr t-att-class="'bg-200 font-weight-bold o_line_section' if line.display_type == 'line_section' else 'font-italic o_line_note' if line.display_type == 'line_note' else ''">
                                     <t t-if="not line.display_type" name="account_invoice_line_accountable">
                                         <td name="account_invoice_line_name"><span t-field="line.name"/></td>
                                         <td class="d-none"><span t-field="line.origin"/></td>
@@ -92,7 +92,7 @@
                                         <td t-attf-class="text-left {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
                                             <span t-esc="', '.join(map(lambda x: (x.description or x.name), line.invoice_line_tax_ids))"/>
                                         </td>
-                                        <td class="text-right">
+                                        <td class="text-right o_price_total">
                                             <span t-field="line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
                                             <span t-field="line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
                                         </td>
@@ -130,17 +130,17 @@
                         <div id="total" class="row">
                             <div t-attf-class="#{'col-4' if report_type != 'html' else 'col-sm-7 col-md-5'} ml-auto">
                                 <table class="table table-sm">
-                                    <tr class="border-black" style="border-bottom:1px solid #dddddd;">
+                                    <tr class="border-black o_subtotal" style="">
                                         <td><strong>Subtotal</strong></td>
                                         <td class="text-right">
                                             <span t-field="o.amount_untaxed"/>
                                         </td>
                                     </tr>
                                     <t t-foreach="o.amount_by_group" t-as="amount_by_group">
-                                        <tr style="border-bottom:1px solid #dddddd;">
+                                        <tr style="">
                                             <t t-if="len(o.tax_line_ids) == 1 and o.amount_untaxed == amount_by_group[2]">
                                                 <td><span t-esc="amount_by_group[0]"/></td>
-                                                <td class="text-right">
+                                                <td class="text-right o_price_total">
                                                     <span t-esc="amount_by_group[3]" />
                                                 </td>
                                             </t>
@@ -151,13 +151,13 @@
                                                         <t t-esc="amount_by_group[4]"/>
                                                     </span>
                                                 </td>
-                                                <td class="text-right">
+                                                <td class="text-right o_price_total">
                                                     <span t-esc="amount_by_group[3]"/>
                                                 </td>
                                             </t>
                                         </tr>
                                     </t>
-                                    <tr class="border-black">
+                                    <tr class="border-black o_total">
                                         <td><strong>Total</strong></td>
                                         <td class="text-right">
                                             <span t-field="o.amount_total"/>
diff --git a/addons/purchase/report/purchase_order_templates.xml b/addons/purchase/report/purchase_order_templates.xml
index a475acce4ca..4418b15b0a6 100644
--- a/addons/purchase/report/purchase_order_templates.xml
+++ b/addons/purchase/report/purchase_order_templates.xml
@@ -26,22 +26,22 @@
             <h2 t-if="o.state in ['purchase', 'done']">Purchase Order Confirmation #<span t-field="o.name"/></h2>
             <h2 t-if="o.state == 'cancel'">Cancelled Purchase Order #<span t-field="o.name"/></h2>
 
-            <div class="row mt32 mb32">
-                <div t-if="o.name" class="col-3">
+            <div id="informations" class="row mt32 mb32">
+                <div t-if="o.name" class="col-3 bm-2">
                     <strong>Our Order Reference:</strong>
-                    <p t-field="o.name"/>
+                    <p t-field="o.name" class="m-0"/>
                 </div>
-                <div t-if="o.partner_ref" class="col-3">
+                <div t-if="o.partner_ref" class="col-3 bm-2">
                     <strong>Your Order Reference:</strong>
-                    <p t-field="o.partner_ref"/>
+                    <p t-field="o.partner_ref" class="m-0"/>
                 </div>
-                <div t-if="o.date_order" class="col-3">
+                <div t-if="o.date_order" class="col-3 bm-2">
                     <strong>Order Date:</strong>
-                    <p t-field="o.date_order"/>
+                    <p t-field="o.date_order" class="m-0"/>
                 </div>
             </div>
 
-            <table class="table table-sm">
+            <table class="table table-sm o_main_table">
                 <thead>
                     <tr>
                         <th><strong>Description</strong></th>
@@ -78,7 +78,7 @@
                 </tbody>
             </table>
 
-            <div class="row justify-content-end">
+            <div id="total" class="row justify-content-end">
                 <div class="col-4">
                     <table class="table table-sm">
                         <tr class="border-black">
@@ -95,7 +95,7 @@
                                     t-options='{"widget": "monetary", "display_currency": o.currency_id}'/>
                             </td>
                         </tr>
-                        <tr class="border-black">
+                        <tr class="border-black o_total">
                             <td><strong>Total</strong></td>
                             <td class="text-right">
                                 <span t-field="o.amount_total"
diff --git a/addons/repair/report/repair_templates_repair_order.xml b/addons/repair/report/repair_templates_repair_order.xml
index 59972c3c33f..1090b957ea2 100644
--- a/addons/repair/report/repair_templates_repair_order.xml
+++ b/addons/repair/report/repair_templates_repair_order.xml
@@ -33,28 +33,28 @@
                         <span t-field="o.name"/>
                     </h2>
 
-                    <div class="row mt32 mb32">
-                        <div t-if="o.product_id.name" class="col-3">
+                    <div id="informations" class="row mt32 mb32">
+                        <div t-if="o.product_id.name" class="col-3 bm-2">
                             <strong>Product to Repair:</strong>
-                            <p t-field="o.product_id.name"/>
+                            <p t-field="o.product_id.name" class="m-0"/>
                         </div>
-                        <div class="col-3" groups="stock.group_production_lot">
+                        <div class="col-3 bm-2" groups="stock.group_production_lot">
                             <strong>Lot/Serial Number:</strong>
                             <t t-if="o.lot_id">
                                 <span t-field="o.lot_id.name"/>
                             </t>
                         </div>
-                        <div t-if="o.guarantee_limit" class="col-3">
+                        <div t-if="o.guarantee_limit" class="col-3 bm-2">
                             <strong>Warranty:</strong>
-                            <p t-field="o.guarantee_limit"/>
+                            <p t-field="o.guarantee_limit" class="m-0"/>
                         </div>
-                        <div class="col-3">
+                        <div class="col-3 bm-2">
                             <strong>Printing Date:</strong>
-                            <p t-esc="datetime.datetime.now().strftime('%Y-%m-%d')" t-options="{'widget': 'date'}"/>
+                            <p t-esc="datetime.datetime.now().strftime('%Y-%m-%d')" t-options="{'widget': 'date'}" class="m-0"/>
                         </div>
                     </div>
 
-                    <table class="table table-sm">
+                    <table class="table table-sm o_main_table">
                         <thead>
                             <tr>
                                 <th>Description</th>
@@ -68,7 +68,7 @@
                         </thead>
                         <tbody>
                             <t t-if="o.operations">
-                                <tr><td colspan="5"><strong>Parts</strong></td></tr>
+                                <tr class="bg-200 o_line_section"><td colspan="5"><strong>Parts</strong></td></tr>
                                 <tr t-foreach="o.operations" t-as="line">
                                     <td>
                                         <p t-if="line.type == 'add'"><i>(Add)</i> <span t-field="line.name" /></p>
@@ -85,14 +85,14 @@
                                         <td class="text-center">
                                             <span t-esc="','.join(map( lambda x: x.name, line.tax_id))"/>
                                         </td>
-                                        <td class="text-right">
+                                        <td class="text-right o_price_total">
                                             <span t-field="line.price_subtotal" t-options='{"widget": "monetary", "display_currency": o.pricelist_id.currency_id}'/>
                                        </td>
                                     </t>
                                 </tr>
                             </t>
                             <t t-if="o.fees_lines">
-                                <tr><td colspan="5"><strong>Operations</strong></td></tr>
+                                <tr class="bg-200 o_line_section"><td colspan="5"><strong>Operations</strong></td></tr>
                                 <tr t-foreach="o.fees_lines" t-as="fees">
                                     <td>
                                         <span t-field="fees.name"/>
@@ -108,7 +108,7 @@
                                         <td class="text-center">
                                             <span t-esc="','.join(map( lambda x: x.name, fees.tax_id))"/>
                                         </td>
-                                        <td class="text-right">
+                                        <td class="text-right o_price_total">
                                             <span t-field="fees.price_subtotal"
                                                 t-options='{"widget": "monetary", "display_currency": o.pricelist_id.currency_id}'/>
                                        </td>
@@ -118,11 +118,11 @@
                         </tbody>
                     </table>
 
-                    <div class="row justify-content-end">
+                    <div id="total" class="row justify-content-end">
                         <div class="col-4">
                             <table class="table table-sm">
                                 <t t-if="o.invoice_method !='none'">
-                                    <tr class="border-black">
+                                    <tr class="border-black o_subtotal">
                                         <td><strong>Total Without Taxes</strong></td>
                                         <td class="text-right">
                                             <span t-field="o.amount_untaxed"
@@ -131,14 +131,14 @@
                                     </tr>
                                     <tr>
                                         <td>Taxes</td>
-                                        <td class="text-right">
+                                        <td class="text-right o_price_total">
                                             <span t-field="o.amount_tax"
                                                 t-options='{"widget": "monetary", "display_currency": o.pricelist_id.currency_id}'/>
                                         </td>
                                     </tr>
-                                    <tr class="border-black">
+                                    <tr class="border-black o_total">
                                         <td><strong>Total</strong></td>
-                                        <td class="text-right">
+                                        <td class="text-right o_price_total">
                                             <span t-field="o.amount_total"
                                                 t-options='{"widget": "monetary", "display_currency": o.pricelist_id.currency_id}'/>
                                         </td>
diff --git a/addons/sale/report/sale_report_templates.xml b/addons/sale/report/sale_report_templates.xml
index ea923c1fd80..8e678b1fcd6 100644
--- a/addons/sale/report/sale_report_templates.xml
+++ b/addons/sale/report/sale_report_templates.xml
@@ -37,37 +37,37 @@
                 <span t-field="doc.name"/>
             </h2>
 
-            <div class="row col mt32 mb32" id="informations">
-                <div t-if="doc.client_order_ref" class="mr32">
+            <div class="row mt32 mb32" id="informations">
+                <div t-if="doc.client_order_ref" class="col-auto mw-100 mb-2">
                     <strong>Your Reference:</strong>
-                    <p t-field="doc.client_order_ref"/>
+                    <p class="m-0" t-field="doc.client_order_ref"/>
                 </div>
-                <div t-if="doc.confirmation_date and doc.state not in ['draft','sent']" class="mr32">
+                <div t-if="doc.confirmation_date and doc.state not in ['draft','sent']" class="col-auto mw-100 mb-2">
                     <strong>Date Ordered:</strong>
-                    <p t-field="doc.confirmation_date"/>
+                    <p class="m-0" t-field="doc.confirmation_date"/>
                 </div>
-                <div t-if="doc.date_order and doc.state in ['draft','sent']" class="mr32">
+                <div t-if="doc.date_order and doc.state in ['draft','sent']" class="col-auto mw-100 mb-2">
                     <strong>Quotation Date:</strong>
-                    <p t-field="doc.date_order"/>
+                    <p class="m-0" t-field="doc.date_order"/>
                 </div>
-                <div t-if="doc.user_id.name" class="mr32">
+                <div t-if="doc.user_id.name" class="col-auto mw-100 mb-2">
                     <strong>Salesperson:</strong>
-                    <p t-field="doc.user_id"/>
+                    <p class="m-0" t-field="doc.user_id"/>
                 </div>
-                <div name="payment_term" t-if="doc.payment_term_id" class="mr32">
+                <div name="payment_term" t-if="doc.payment_term_id" class="col-auto mw-100 mb-2">
                     <strong>Payment Terms:</strong>
-                    <p t-field="doc.payment_term_id"/>
+                    <p class="m-0" t-field="doc.payment_term_id"/>
                 </div>
-                <div t-if="doc.validity_date and doc.state in ['draft', 'sent']" class="mr32">
+                <div t-if="doc.validity_date and doc.state in ['draft', 'sent']" class="col-auto mw-100 mb-2">
                     <strong>Expiration Date:</strong>
-                    <p t-field="doc.validity_date"/>
+                    <p class="m-0" t-field="doc.validity_date"/>
                 </div>
             </div>
 
             <!-- Is there a discount on at least one line? -->
             <t t-set="display_discount" t-value="any([l.discount for l in doc.order_line])"/>
 
-            <table class="table table-sm">
+            <table class="table table-sm o_main_table">
                 <thead>
                     <tr>
                         <t t-set="colspan" t-value="5"/>
@@ -94,7 +94,7 @@
                         <t t-set="current_subtotal" t-value="current_subtotal + line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
                         <t t-set="current_subtotal" t-value="current_subtotal + line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
 
-                        <tr t-att-class="'bg-200 font-weight-bold' if line.display_type == 'line_section' else 'font-italic' if line.display_type == 'line_note' else ''">
+                        <tr t-att-class="'bg-200 font-weight-bold o_line_section' if line.display_type == 'line_section' else 'font-italic o_line_note' if line.display_type == 'line_note' else ''">
                             <t t-if="not line.display_type">
                                 <td><span t-field="line.name"/></td>
                                 <td class="text-right">
@@ -110,7 +110,7 @@
                                 <td class="text-right">
                                     <span t-esc="', '.join(map(lambda x: (x.description or x.name), line.tax_id))"/>
                                 </td>
-                                <td class="text-right">
+                                <td class="text-right o_price_total">
                                     <span t-field="line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
                                     <span t-field="line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
                                 </td>
@@ -145,23 +145,23 @@
             </table>
 
             <div class="clearfix">
-                <div class="row" name="total">
+                <div id="total" class="row" name="total">
                     <div t-attf-class="#{'col-4' if report_type != 'html' else 'col-sm-7 col-md-5'} ml-auto">
                         <table class="table table-sm">
-                            <tr class="border-black" style="border-bottom:1px solid #dddddd;">
+                            <tr class="border-black o_subtotal" style="">
                                 <td><strong>Subtotal</strong></td>
                                 <td class="text-right">
                                     <span t-field="doc.amount_untaxed"/>
                                 </td>
                             </tr>
                             <t t-foreach="doc.amount_by_group" t-as="amount_by_group">
-                                <tr style="border-bottom:1px solid #dddddd;">
+                                <tr style="">
                                     <t t-if="amount_by_group[3] == 1 and doc.amount_untaxed == amount_by_group[2]">
                                         <td>
                                             <span t-esc="amount_by_group[0]"/>
                                             <span>&amp;nbsp;<span>on</span>&amp;nbsp;<t t-esc="amount_by_group[2]" t-options='{"widget": "monetary", "display_currency": doc.pricelist_id.currency_id}'/></span>
                                         </td>
-                                        <td class="text-right">
+                                        <td class="text-right o_price_total">
                                             <span t-esc="amount_by_group[1]"
                                                 t-options='{"widget": "monetary", "display_currency": doc.pricelist_id.currency_id}'/>
                                         </td>
@@ -170,14 +170,14 @@
                                         <td>
                                             <span t-esc="amount_by_group[0]"/>
                                         </td>
-                                        <td class="text-right">
+                                        <td class="text-right o_price_total">
                                             <span t-esc="amount_by_group[1]"
                                                 t-options='{"widget": "monetary", "display_currency": doc.pricelist_id.currency_id}'/>
                                         </td>
                                     </t>
                                 </tr>
                             </t>
-                            <tr class="border-black">
+                            <tr class="border-black o_total">
                                 <td><strong>Total</strong></td>
                                 <td class="text-right">
                                     <span t-field="doc.amount_total"/>
diff --git a/addons/sale/views/sale_portal_templates.xml b/addons/sale/views/sale_portal_templates.xml
index 9a428d7ab19..38f14849235 100644
--- a/addons/sale/views/sale_portal_templates.xml
+++ b/addons/sale/views/sale_portal_templates.xml
@@ -449,7 +449,7 @@
                             <t t-set="current_subtotal" t-value="current_subtotal + line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
                             <t t-set="current_subtotal" t-value="current_subtotal + line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
 
-                            <tr t-att-class="'bg-200 font-weight-bold' if line.display_type == 'line_section' else 'font-italic' if line.display_type == 'line_note' else ''">
+                            <tr t-att-class="'bg-200 font-weight-bold o_line_section' if line.display_type == 'line_section' else 'font-italic o_line_note' if line.display_type == 'line_note' else ''">
                                 <t t-if="not line.display_type">
                                     <td id="product_name"><span t-field="line.name"/></td>
                                     <td class="text-right">
diff --git a/addons/web/static/src/scss/layout_background.scss b/addons/web/static/src/scss/layout_background.scss
index ff2d0cef3b0..9c47ac72a27 100644
--- a/addons/web/static/src/scss/layout_background.scss
+++ b/addons/web/static/src/scss/layout_background.scss
@@ -34,34 +34,48 @@
     background-position: bottom center;
     background-repeat: no-repeat;
     min-height: 620px;
+
+    .table {
+        border-top: 1px solid gray('300');
+    }
+
+    .table td, .table th {
+        border-top: none;
+    }
     thead tr th, h2 {
         color: $o-brand-odoo;
     }
     tbody {
         color: gray('700');
-        tr:nth-child(odd) {
-            background-color: rgba(220, 205, 216, 0.2);
-        }
-        tr td {
-            border-top: none;
+        tr {
+            &:nth-child(odd) {
+                background-color: rgba(220, 205, 216, 0.2);
+            }
+            &.o_line_section {
+                color: $o-brand-odoo;
+                background-color: rgba(73, 80, 87, 0.2) !important;
+            }
         }
     }
     /*Total table*/
-    .row > .col-4 > table {
-        tr:nth-child(odd) {
-            background-color: transparent !important;
-        }
-        tr:first-child td {
-            /*we could get rid of this rule if .border-black td would be terminated in report.scss*/
-            border-top: none !important;
-        }
-        tr:last-child td {
-            color: $o-brand-odoo;
-        }
-    }
-    #total {
-        table tr:last-child td {
-            border-bottom: 1px solid black;
+    /* row div rule compat 12.0 */
+    .row > div > table,
+    div#total table {
+        tr {
+            &:nth-child(odd) {
+                background-color: transparent !important;
+            }
+            /* first-child & last-child rule compat 12.0 */
+            &:first-child,
+            &:last-child,
+            &.o_subtotal,
+            &.o_total {
+                border-top: none !important;
+                td {
+                    color: $o-brand-odoo;
+                    border-top: 1px solid gray('400') !important;
+                }
+            }
         }
     }
 }
diff --git a/addons/web/static/src/scss/layout_boxed.scss b/addons/web/static/src/scss/layout_boxed.scss
index b0b2fb1f743..bf19b6fb7ae 100644
--- a/addons/web/static/src/scss/layout_boxed.scss
+++ b/addons/web/static/src/scss/layout_boxed.scss
@@ -23,52 +23,73 @@
     }
 }
 .o_report_layout_boxed {
-    // This is not a general rule since the id is not used in all the reports,
-    // we should make a general structure for report body to use it everywhere
-    #informations {
-        border: 1px solid gray('700');
-        padding-top: 10px;
-        margin: 0;
-    }
     > h2 {
         text-transform: uppercase;
     }
     table {
         border: 1px solid gray('700');
         thead {
+            border-bottom: 2px solid gray('700');
             tr th {
-                border-bottom: 3px solid gray('700') !important;
                 text-transform: uppercase;
+                border: 1px solid gray('700');
             }
         }
         tbody {
             color: gray('700');
             tr {
                 td {
+                    // remove border-top from standard layout
                     border-top: none;
                     border-right: 1px solid gray('700');
                 }
-                td:last-child {
+                &.o_line_section td,
+                &.o_line_note td,
+                &.is-subtotal td {
+                    border-top: 1px solid gray('700');
+                    border-bottom: 1px solid gray('700');
+                }
+                &.o_line_section td {
+                    background-color: gray('700');
+                    color: #fff;
+                }
+                &.is-subtotal,
+                td.o_price_total {
                     background-color: gray('200');
                 }
             }
         }
     }
+    /* compat 12.0 */
+    .page > table:not(.o_main_table) tr td:last-child {
+        background-color: gray('200');
+    }
+    /* compat 12.0 */
+    .row:not(#total) > div > table tr:not(:first-child):not(:last-child) td:last-child {
+        background-color: gray('200');
+    }
     /*Total table*/
-    .row > .col-4 > table {
-        td {
-            border-right: none;
-        }
-        tr:last-child td, tr:first-child td {
-            /*we could get rid of this rule if .border-black td would be terminated in report.scss*/
-            border-top: none !important;
-        }
-        tr:first-child td {
-            background-color: transparent;
-        }
-        tr:last-child td {
-            background-color: gray('700');
-            color: #fff;
+    /* row div rule compat 12.0 */
+    .row > div > table,
+    div#total table {
+        tr {
+            &:first-child,
+            &.o_subtotal {
+                border-bottom: 1px solid gray('700');
+
+                td:first-child {
+                    border-right: none;
+                }
+            }
+            &:last-child td,
+            &.o_total td {
+                background-color: gray('700');
+                color: #fff;
+
+                &:first-child {
+                    border-right: none;
+                }
+            }
         }
     }
 }
diff --git a/addons/web/static/src/scss/layout_clean.scss b/addons/web/static/src/scss/layout_clean.scss
index 06b2e808dd4..910abc763a4 100644
--- a/addons/web/static/src/scss/layout_clean.scss
+++ b/addons/web/static/src/scss/layout_clean.scss
@@ -18,12 +18,10 @@
         font-weight: bolder;
     }
     .pagenumber {
-        width: 35px;
-        height: 35px;
         border: 3px solid $o-brand-odoo;
         background-color: $o-brand-primary;
         color: white;
-        padding-top: 6px;
+        padding: 4px 8px;
         text-align: center;
     }
 }
@@ -36,6 +34,10 @@
         color: $o-brand-odoo;
     }
     table {
+        &.o_main_table {
+            margin-bottom: 0;
+        }
+
         thead {
             color: $o-brand-odoo;
             tr th {
@@ -66,18 +68,22 @@
         }
     }
     /*Total table*/
-    .row > .col-4 {
-            width: 43%;
-            position: relative;
-            top: -20px;
-            > table {
-            tr:last-child td {
-                border-top: 1px solid gray('200') !important;
-            }
-            tr:first-child td {
-                /*we could get rid of this rule if .border-black td would be terminated in report.scss*/
+    /* compat 12.0 */
+    .row:not(#total) > div:has(table) {
+        top: -16px;
+    }
+    /* row col rule compat 12.0 */
+    .row > div > table,
+    div#total table {
+        tr {
+            &:first-child td,
+            &.o_subtotal {
                 border-top: none !important;
             }
+            &:last-child td,
+            &.o_total {
+                border-top: 1px solid gray('200') !important;
+            }
         }
     }
 }
diff --git a/addons/web/static/src/scss/report.scss b/addons/web/static/src/scss/report.scss
index 37a7630225b..e901b5b9364 100644
--- a/addons/web/static/src/scss/report.scss
+++ b/addons/web/static/src/scss/report.scss
@@ -44,3 +44,18 @@ body {
 .o_underline {
     text-decoration: underline;
 }
+
+/*Total table*/
+div#total {
+    page-break-inside: avoid;
+    table {
+        tr {
+            &.o_subtotal,
+            &.o_total {
+                td {
+                    border-top: 1px solid black !important;
+                }
+            }
+        }
+    }
+}