diff --git a/public/css/custom.css b/public/css/custom.css
index 61fb23e3b..7bc1d2807 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -589,6 +589,11 @@ button:focus
 {
     padding-top: 1.75rem !important;
 }
+
+.item-total
+{
+    width: 15%;
+}
 /*--------Invoice and Bill Total Column Finish--------*/
 
 /*--------Custom Table--------*/
diff --git a/resources/views/purchases/bills/create.blade.php b/resources/views/purchases/bills/create.blade.php
index ef2c051b4..cc79027b6 100644
--- a/resources/views/purchases/bills/create.blade.php
+++ b/resources/views/purchases/bills/create.blade.php
@@ -34,29 +34,29 @@
                         <div class="table-responsive overflow-x-scroll overflow-y-hidden ">
                             <table class="table table-bordered" id="items">
                                 <thead class="thead-light">
-                                    <tr class="row">
+                                    <tr>
                                         @stack('actions_th_start')
-                                            <th class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">{{ trans('general.actions') }}</th>
+                                            <th class="text-center border-right-0 border-bottom-0">{{ trans('general.actions') }}</th>
                                         @stack('actions_th_end')
 
                                         @stack('name_th_start')
-                                            <th class="col-sm-3 text-left border-right-0 border-bottom-0">{{ trans('general.name') }}</th>
+                                            <th class="text-left border-right-0 border-bottom-0">{{ trans('general.name') }}</th>
                                         @stack('name_th_end')
 
                                         @stack('quantity_th_start')
-                                            <th class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">{{ trans('bills.quantity') }}</th>
+                                            <th class="text-center border-right-0 border-bottom-0">{{ trans('bills.quantity') }}</th>
                                         @stack('quantity_th_end')
 
                                         @stack('price_th_start')
-                                            <th class="col-sm-2 text-right border-right-0 border-bottom-0">{{ trans('bills.price') }}</th>
+                                            <th class="text-right border-right-0 border-bottom-0">{{ trans('bills.price') }}</th>
                                         @stack('price_th_end')
 
                                         @stack('taxes_th_start')
-                                            <th class="col-sm-3 text-right border-right-0 border-bottom-0">{{ trans_choice('general.taxes', 1) }}</th>
+                                            <th class="text-right border-right-0 border-bottom-0">{{ trans_choice('general.taxes', 1) }}</th>
                                         @stack('taxes_th_end')
 
                                         @stack('total_th_start')
-                                            <th class="col-sm-2 text-right border-bottom-0">{{ trans('bills.total') }}</th>
+                                            <th class="text-right border-bottom-0 item-total">{{ trans('bills.total') }}</th>
                                         @stack('total_th_end')
                                     </tr>
                                 </thead>
@@ -64,21 +64,21 @@
                                     @include('purchases.bills.item')
 
                                     @stack('add_item_td_start')
-                                        <tr class="row" id="addItem">
-                                            <td class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">
+                                        <tr id="addItem">
+                                            <td class="text-center border-right-0 border-bottom-0" colspan="1">
                                                 <button type="button" @click="onAddItem" id="button-add-item" data-toggle="tooltip" title="{{ trans('general.add') }}" class="btn btn-icon btn-outline-success btn-lg" data-original-title="{{ trans('general.add') }}"><i class="fa fa-plus"></i>
                                                 </button>
                                             </td>
-                                            <td class="col-sm-11 text-right border-bottom-0"></td>
+                                            <td class="text-right border-bottom-0" colspan="5"></td>
                                         </tr>
                                     @stack('add_item_td_end')
 
                                     @stack('sub_total_td_start')
-                                        <tr class="row" id="tr-subtotal">
-                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
+                                        <tr id="tr-subtotal">
+                                            <td class="text-right border-right-0 border-bottom-0" colspan="5">
                                                 <strong>{{ trans('bills.sub_total') }}</strong>
                                             </td>
-                                            <td class="col-sm-2 text-right border-bottom-0 long-texts">
+                                            <td class="text-right border-bottom-0 long-texts" colspan="1">
                                                 {{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="sub-total" v-if="totals.sub" v-html="totals.sub"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -87,8 +87,8 @@
                                     @stack('sub_total_td_end')
 
                                     @stack('add_discount_td_start')
-                                        <tr class="row" id="tr-discount">
-                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
+                                        <tr id="tr-discount">
+                                            <td class="text-right border-right-0 border-bottom-0" colspan="5">
                                                 <el-popover
                                                     popper-class="p-0 h-0"
                                                     placement="bottom"
@@ -129,7 +129,7 @@
                                                     <el-link slot="reference" type="primary" v-if="totals.discount_text" v-html="totals.discount_text"></el-link>
                                                 </el-popover>
                                             </td>
-                                            <td class="col-sm-2 text-right border-bottom-0">
+                                            <td class="text-right border-bottom-0" colspan="1">
                                                 {{ Form::moneyGroup('discount_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="discount-total" v-if="totals.discount" v-html="totals.discount"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -139,11 +139,11 @@
                                     @stack('add_discount_td_end')
 
                                     @stack('tax_total_td_start')
-                                        <tr class="row" id="tr-tax">
-                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
+                                        <tr id="tr-tax">
+                                            <td class="text-right border-right-0 border-bottom-0" colspan="5">
                                                 <strong>{{ trans_choice('general.taxes', 1) }}</strong>
                                             </td>
-                                            <td class="col-sm-2 text-right border-bottom-0 long-texts">
+                                            <td class="text-right border-bottom-0 long-texts" colspan="1">
                                                 {{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.tax', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="tax-total" v-if="totals.tax" v-html="totals.tax"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -152,11 +152,11 @@
                                     @stack('tax_total_td_end')
 
                                     @stack('grand_total_td_start')
-                                        <tr class="row" id="tr-total">
-                                            <td class="col-sm-10 text-right border-right-0">
+                                        <tr id="tr-total">
+                                            <td class="text-right border-right-0" colspan="5">
                                                 <strong>{{ trans('bills.total') }}</strong>
                                             </td>
-                                            <td class="col-sm-2 text-right long-texts">
+                                            <td class="text-right long-texts" colspan="1">
                                                 {{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="grand-total" v-if="totals.total" v-html="totals.total"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
diff --git a/resources/views/purchases/bills/edit.blade.php b/resources/views/purchases/bills/edit.blade.php
index 5cc4d6e74..3027520f8 100644
--- a/resources/views/purchases/bills/edit.blade.php
+++ b/resources/views/purchases/bills/edit.blade.php
@@ -35,29 +35,29 @@
                         <div class="table-responsive overflow-x-scroll overflow-y-hidden">
                             <table class="table table-bordered" id="items">
                                 <thead class="thead-light">
-                                    <tr class="row">
+                                    <tr>
                                         @stack('actions_th_start')
-                                            <th class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">{{ trans('general.actions') }}</th>
+                                            <th class="text-center border-right-0 border-bottom-0">{{ trans('general.actions') }}</th>
                                         @stack('actions_th_end')
 
                                         @stack('name_th_start')
-                                            <th class="col-sm-3 text-left border-right-0 border-bottom-0">{{ trans('general.name') }}</th>
+                                            <th class="text-left border-right-0 border-bottom-0">{{ trans('general.name') }}</th>
                                         @stack('name_th_end')
 
                                         @stack('quantity_th_start')
-                                            <th class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">{{ trans('bills.quantity') }}</th>
+                                            <th class="text-center border-right-0 border-bottom-0">{{ trans('bills.quantity') }}</th>
                                         @stack('quantity_th_end')
 
                                         @stack('price_th_start')
-                                            <th class="col-sm-2 text-right border-right-0 border-bottom-0">{{ trans('bills.price') }}</th>
+                                            <th class="text-right border-right-0 border-bottom-0">{{ trans('bills.price') }}</th>
                                         @stack('price_th_end')
 
                                         @stack('taxes_th_start')
-                                            <th class="col-sm-3 text-right border-right-0 border-bottom-0">{{ trans_choice('general.taxes', 1) }}</th>
+                                            <th class="text-right border-right-0 border-bottom-0">{{ trans_choice('general.taxes', 1) }}</th>
                                         @stack('taxes_th_end')
 
                                         @stack('total_th_start')
-                                            <th class="col-sm-2 text-right border-bottom-0">{{ trans('bills.total') }}</th>
+                                            <th class="text-right border-bottom-0 item-total">{{ trans('bills.total') }}</th>
                                         @stack('total_th_end')
                                     </tr>
                                 </thead>
@@ -65,21 +65,21 @@
                                     @include('purchases.bills.item')
 
                                     @stack('add_item_td_start')
-                                        <tr class="row" id="addItem">
-                                            <td class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">
+                                        <tr id="addItem">
+                                            <td class="text-center border-right-0 border-bottom-0" colspan="1">
                                                 <button type="button" @click="onAddItem" id="button-add-item" data-toggle="tooltip" title="{{ trans('general.add') }}" class="btn btn-icon btn-outline-success btn-lg" data-original-title="{{ trans('general.add') }}"><i class="fa fa-plus"></i>
                                                 </button>
                                             </td>
-                                            <td class="col-sm-11 text-right border-bottom-0"></td>
+                                            <td class="text-right border-bottom-0" colspan="5"></td>
                                         </tr>
                                     @stack('add_item_td_end')
 
                                     @stack('sub_total_td_start')
-                                        <tr class="row" id="tr-subtotal">
-                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
+                                        <tr id="tr-subtotal">
+                                            <td class="text-right border-right-0 border-bottom-0" colspan="5">
                                                 <strong>{{ trans('bills.sub_total') }}</strong>
                                             </td>
-                                            <td class="col-sm-2 text-right border-bottom-0 long-texts">
+                                            <td class="text-right border-bottom-0 long-texts" colspan="1">
                                                 {{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="sub-total" v-if="totals.sub" v-html="totals.sub"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -88,8 +88,8 @@
                                     @stack('sub_total_td_end')
 
                                     @stack('add_discount_td_start')
-                                        <tr class="row" id="tr-discount">
-                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
+                                        <tr id="tr-discount">
+                                            <td class="text-right border-right-0 border-bottom-0" colspan="5">
                                                 <el-popover
                                                     popper-class="p-0 h-0"
                                                     placement="bottom"
@@ -130,7 +130,7 @@
                                                     <el-link slot="reference" type="primary" v-if="totals.discount_text" v-html="totals.discount_text"></el-link>
                                                 </el-popover>
                                             </td>
-                                            <td class="col-sm-2 text-right border-bottom-0">
+                                            <td class="text-right border-bottom-0" colspan="1">
                                                 {{ Form::moneyGroup('discount_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="discount-total" v-if="totals.discount" v-html="totals.discount"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -140,11 +140,11 @@
                                     @stack('add_discount_td_end')
 
                                     @stack('tax_total_td_start')
-                                        <tr class="row" id="tr-tax">
-                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
+                                        <tr id="tr-tax">
+                                            <td class="text-right border-right-0 border-bottom-0" colspan="5">
                                                 <strong>{{ trans_choice('general.taxes', 1) }}</strong>
                                             </td>
-                                            <td class="col-sm-2 text-right border-bottom-0 long-texts">
+                                            <td class="text-right border-bottom-0 long-texts" colspan="1">
                                                 {{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.tax', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="tax-total" v-if="totals.tax" v-html="totals.tax"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -153,11 +153,11 @@
                                     @stack('tax_total_td_end')
 
                                     @stack('grand_total_td_start')
-                                        <tr class="row" id="tr-total">
-                                            <td class="col-sm-10 text-right border-right-0">
+                                        <tr id="tr-total">
+                                            <td class="text-right border-right-0" colspan="5">
                                                 <strong>{{ trans('bills.total') }}</strong>
                                             </td>
-                                            <td class="col-sm-2 text-right long-texts">
+                                            <td class="text-right long-texts" colspan="1">
                                                 {{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="grand-total" v-if="totals.total" v-html="totals.total"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
diff --git a/resources/views/purchases/bills/item.blade.php b/resources/views/purchases/bills/item.blade.php
index 271a9f2fa..ca8ff9498 100644
--- a/resources/views/purchases/bills/item.blade.php
+++ b/resources/views/purchases/bills/item.blade.php
@@ -1,7 +1,7 @@
-<tr class="d-flex flex-nowrap" v-for="(row, index) in form.items"
+<tr v-for="(row, index) in form.items"
     :index="index">
     @stack('actions_td_start')
-        <td class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">
+        <td class="text-center border-right-0 border-bottom-0">
             @stack('actions_button_start')
                 <button type="button"
                         @click="onDeleteItem(index)"
@@ -14,7 +14,7 @@
     @stack('actions_td_end')
 
     @stack('name_td_start')
-        <td class="col-sm-3 border-right-0 border-bottom-0">
+        <td class="border-right-0 border-bottom-0">
             @stack('name_input_start')
             <akaunting-select-remote
                 :form-classes="[{'has-error': form.errors.get('name') }]"
@@ -51,7 +51,7 @@
     @stack('name_td_end')
 
     @stack('quantity_td_start')
-        <td class="col-sm-1 border-right-0 border-bottom-0">
+        <td class="border-right-0 border-bottom-0">
             @stack('quantity_input_start')
                 <input class="form-control text-center"
                        autocomplete="off"
@@ -67,7 +67,7 @@
     @stack('quantity_td_end')
 
     @stack('price_td_start')
-        <td class="col-sm-2 border-right-0 border-bottom-0">
+        <td class="border-right-0 border-bottom-0 pb-0">
             @stack('price_input_start')
                 {{ Form::moneyGroup('name', '', '', ['required' => 'required', 'v-model' => 'row.price', 'data-item' => 'price', 'currency' => $currency, 'dynamic-currency' => 'currency', 'change' => 'row.price = $event; onCalculateTotal'], 0.00, 'text-right input-price') }}
                 <input name="items[][currency]"
@@ -81,7 +81,7 @@
     @stack('price_td_end')
 
     @stack('taxes_td_start')
-        <td class="col-sm-3 border-right-0 border-bottom-0">
+        <td class="border-right-0 border-bottom-0">
             @stack('tax_id_input_start')
             <akaunting-select
                 class="mb-0 select-tax"
@@ -123,7 +123,7 @@
     @stack('taxes_td_end')
 
     @stack('total_td_start')
-        <td class="col-sm-2 text-right total-column border-bottom-0 long-texts">
+        <td class="text-right total-column border-bottom-0 long-texts">
             <akaunting-money :col="'d-none'"
                 :masked="true"
                 :error="{{ 'form.errors.get("total")' }}"
diff --git a/resources/views/sales/invoices/create.blade.php b/resources/views/sales/invoices/create.blade.php
index d0ff170fe..0674d346c 100644
--- a/resources/views/sales/invoices/create.blade.php
+++ b/resources/views/sales/invoices/create.blade.php
@@ -34,29 +34,29 @@
                         <div class="table-responsive overflow-x-scroll overflow-y-hidden">
                             <table class="table table-bordered" id="items">
                                 <thead class="thead-light">
-                                    <tr class="row">
+                                    <tr>
                                         @stack('actions_th_start')
-                                            <th class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">{{ trans('general.actions') }}</th>
+                                            <th class="text-center border-right-0 border-bottom-0">{{ trans('general.actions') }}</th>
                                         @stack('actions_th_end')
 
                                         @stack('name_th_start')
-                                            <th class="col-sm-3 text-left border-right-0 border-bottom-0">{{ trans('general.name') }}</th>
+                                            <th class="text-left border-right-0 border-bottom-0">{{ trans('general.name') }}</th>
                                         @stack('name_th_end')
 
                                         @stack('quantity_th_start')
-                                            <th class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">{{ trans($text_override['quantity']) }}</th>
+                                            <th class="text-center border-right-0 border-bottom-0">{{ trans($text_override['quantity']) }}</th>
                                         @stack('quantity_th_end')
 
                                         @stack('price_th_start')
-                                            <th class="col-sm-2 text-right border-right-0 border-bottom-0">{{ trans($text_override['price']) }}</th>
+                                            <th class="text-right border-right-0 border-bottom-0">{{ trans($text_override['price']) }}</th>
                                         @stack('price_th_end')
 
                                         @stack('taxes_th_start')
-                                            <th class="col-sm-3 text-right border-right-0 border-bottom-0">{{ trans_choice('general.taxes', 1) }}</th>
+                                            <th class="text-right border-right-0 border-bottom-0">{{ trans_choice('general.taxes', 1) }}</th>
                                         @stack('taxes_th_end')
 
                                         @stack('total_th_start')
-                                            <th class="col-sm-2 text-right border-bottom-0">{{ trans('invoices.total') }}</th>
+                                            <th class="text-right border-bottom-0 item-total">{{ trans('invoices.total') }}</th>
                                         @stack('total_th_end')
                                     </tr>
                                 </thead>
@@ -64,21 +64,21 @@
                                     @include('sales.invoices.item')
 
                                     @stack('add_item_td_start')
-                                        <tr class="row" id="addItem">
-                                            <td class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">
+                                        <tr id="addItem">
+                                            <td class="text-center border-right-0 border-bottom-0" colspan="1">
                                                 <button type="button" @click="onAddItem" id="button-add-item" data-toggle="tooltip" title="{{ trans('general.add') }}" class="btn btn-icon btn-outline-success btn-lg" data-original-title="{{ trans('general.add') }}"><i class="fa fa-plus"></i>
                                                 </button>
                                             </td>
-                                            <td class="col-sm-11 text-right border-bottom-0"></td>
+                                            <td class="text-right border-bottom-0" colspan="5"></td>
                                         </tr>
                                     @stack('add_item_td_end')
 
                                     @stack('sub_total_td_start')
-                                        <tr class="row" id="tr-subtotal">
-                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
+                                        <tr id="tr-subtotal">
+                                            <td class="text-right border-right-0 border-bottom-0" colspan="5">
                                                 <strong>{{ trans('invoices.sub_total') }}</strong>
                                             </td>
-                                            <td class="col-sm-2 text-right border-bottom-0 long-texts">
+                                            <td class="text-right border-bottom-0 long-texts" colspan=1">
                                                 {{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="sub-total" v-if="totals.sub" v-html="totals.sub"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -87,8 +87,8 @@
                                     @stack('sub_total_td_end')
 
                                     @stack('add_discount_td_start')
-                                        <tr class="row" id="tr-discount">
-                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
+                                        <tr id="tr-discount">
+                                            <td class="text-right border-right-0 border-bottom-0" colspan="5">
                                                 <el-popover
                                                     popper-class="p-0 h-0"
                                                     placement="bottom"
@@ -129,7 +129,7 @@
                                                     <el-link slot="reference" type="primary" v-if="totals.discount_text" v-html="totals.discount_text"></el-link>
                                                 </el-popover>
                                             </td>
-                                            <td class="col-sm-2 text-right border-bottom-0">
+                                            <td class="text-right border-bottom-0" colspan="1">
                                                 {{ Form::moneyGroup('discount_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="discount-total" v-if="totals.discount" v-html="totals.discount"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -139,11 +139,11 @@
                                     @stack('add_discount_td_end')
 
                                     @stack('tax_total_td_start')
-                                        <tr class="row" id="tr-tax">
-                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
+                                        <tr id="tr-tax">
+                                            <td class="text-right border-right-0 border-bottom-0" colspan="5">
                                                 <strong>{{ trans_choice('general.taxes', 1) }}</strong>
                                             </td>
-                                            <td class="col-sm-2 text-right border-bottom-0 long-texts">
+                                            <td class="text-right border-bottom-0 long-texts" colspan="1">
                                                 {{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.tax', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="tax-total" v-if="totals.tax" v-html="totals.tax"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -152,11 +152,11 @@
                                     @stack('tax_total_td_end')
 
                                     @stack('grand_total_td_start')
-                                        <tr class="row" id="tr-total">
-                                            <td class="col-sm-10 text-right border-right-0">
+                                        <tr id="tr-total">
+                                            <td class="text-right border-right-0" colspan="5">
                                                 <strong>{{ trans('invoices.total') }}</strong>
                                             </td>
-                                            <td class="col-sm-2 text-right long-texts">
+                                            <td class="text-right long-texts" colspan="1">
                                                 {{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="grand-total" v-if="totals.total" v-html="totals.total"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
diff --git a/resources/views/sales/invoices/edit.blade.php b/resources/views/sales/invoices/edit.blade.php
index 0e9804987..05d0d8a97 100644
--- a/resources/views/sales/invoices/edit.blade.php
+++ b/resources/views/sales/invoices/edit.blade.php
@@ -35,29 +35,29 @@
                         <div class="table-responsive overflow-x-scroll overflow-y-hidden">
                             <table class="table table-bordered" id="items">
                                 <thead class="thead-light">
-                                    <tr class="row">
+                                    <tr>
                                         @stack('actions_th_start')
-                                            <th class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">{{ trans('general.actions') }}</th>
+                                            <th class="text-center border-right-0 border-bottom-0">{{ trans('general.actions') }}</th>
                                         @stack('actions_th_end')
 
                                         @stack('name_th_start')
-                                            <th class="col-sm-3 text-left border-right-0 border-bottom-0">{{ trans('general.name') }}</th>
+                                            <th class="text-left border-right-0 border-bottom-0">{{ trans('general.name') }}</th>
                                         @stack('name_th_end')
 
                                         @stack('quantity_th_start')
-                                            <th class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">{{ trans($text_override['quantity']) }}</th>
+                                            <th class="text-center border-right-0 border-bottom-0">{{ trans($text_override['quantity']) }}</th>
                                         @stack('quantity_th_end')
 
                                         @stack('price_th_start')
-                                            <th class="col-sm-2 text-right border-right-0 border-bottom-0">{{ trans($text_override['price']) }}</th>
+                                            <th class="text-right border-right-0 border-bottom-0">{{ trans($text_override['price']) }}</th>
                                         @stack('price_th_end')
 
                                         @stack('taxes_th_start')
-                                            <th class="col-sm-3 text-right border-right-0 border-bottom-0">{{ trans_choice('general.taxes', 1) }}</th>
+                                            <th class="text-right border-right-0 border-bottom-0">{{ trans_choice('general.taxes', 1) }}</th>
                                         @stack('taxes_th_end')
 
                                         @stack('total_th_start')
-                                            <th class="col-sm-2 text-right border-bottom-0">{{ trans('invoices.total') }}</th>
+                                            <th class="text-right border-bottom-0 item-total">{{ trans('invoices.total') }}</th>
                                         @stack('total_th_end')
                                     </tr>
                                 </thead>
@@ -65,21 +65,21 @@
                                     @include('sales.invoices.item')
 
                                     @stack('add_item_td_start')
-                                        <tr class="row" id="addItem">
-                                            <td class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">
+                                        <tr id="addItem">
+                                            <td class="text-center border-right-0 border-bottom-0" colspan="1">
                                                 <button type="button" @click="onAddItem" id="button-add-item" data-toggle="tooltip" title="{{ trans('general.add') }}" class="btn btn-icon btn-outline-success btn-lg" data-original-title="{{ trans('general.add') }}"><i class="fa fa-plus"></i>
                                                 </button>
                                             </td>
-                                            <td class="col-sm-11 text-right border-bottom-0"></td>
+                                            <td class="text-right border-bottom-0" colspan="5"></td>
                                         </tr>
                                     @stack('add_item_td_end')
 
                                     @stack('sub_total_td_start')
-                                        <tr class="row" id="tr-subtotal">
-                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
+                                        <tr id="tr-subtotal">
+                                            <td class="text-right border-right-0 border-bottom-0" colspan="5">
                                                 <strong>{{ trans('invoices.sub_total') }}</strong>
                                             </td>
-                                            <td class="col-sm-2 text-right border-bottom-0 long-texts">
+                                            <td class="text-right border-bottom-0 long-texts" colspan="1">
                                                 {{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="sub-total" v-if="totals.sub" v-html="totals.sub"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -88,8 +88,8 @@
                                     @stack('sub_total_td_end')
 
                                     @stack('add_discount_td_start')
-                                        <tr class="row" id="tr-discount">
-                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
+                                        <tr id="tr-discount">
+                                            <td class="text-right border-right-0 border-bottom-0" colspan="5">
                                                 <el-popover
                                                     popper-class="p-0 h-0"
                                                     placement="bottom"
@@ -130,7 +130,7 @@
                                                     <el-link slot="reference" type="primary" v-if="totals.discount_text" v-html="totals.discount_text"></el-link>
                                                 </el-popover>
                                             </td>
-                                            <td class="col-sm-2 text-right border-bottom-0">
+                                            <td class="text-right border-bottom-0" colspan="1">
                                                 {{ Form::moneyGroup('discount_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="discount-total" v-if="totals.discount" v-html="totals.discount"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -140,11 +140,11 @@
                                     @stack('add_discount_td_end')
 
                                     @stack('tax_total_td_start')
-                                        <tr class="row" id="tr-tax">
-                                            <td class="col-sm-10 text-right border-right-0 border-bottom-0">
+                                        <tr id="tr-tax">
+                                            <td class="text-right border-right-0 border-bottom-0" colspan="5">
                                                 <strong>{{ trans_choice('general.taxes', 1) }}</strong>
                                             </td>
-                                            <td class="col-sm-2 text-right border-bottom-0 long-texts">
+                                            <td class="text-right border-bottom-0 long-texts" colspan="1">
                                                 {{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.tax', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="tax-total" v-if="totals.tax" v-html="totals.tax"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
@@ -153,11 +153,11 @@
                                     @stack('tax_total_td_end')
 
                                     @stack('grand_total_td_start')
-                                        <tr class="row" id="tr-total">
-                                            <td class="col-sm-10 text-right border-right-0">
+                                        <tr id="tr-total">
+                                            <td class="text-right border-right-0" colspan="5">
                                                 <strong>{{ trans('invoices.total') }}</strong>
                                             </td>
-                                            <td class="col-sm-2 text-right long-texts">
+                                            <td class="text-right long-texts" colspan="1">
                                                 {{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="grand-total" v-if="totals.total" v-html="totals.total"></span>
                                                 <span v-else>@money(0, $currency->code, true)</span>
diff --git a/resources/views/sales/invoices/item.blade.php b/resources/views/sales/invoices/item.blade.php
index 3c6d2540b..92b02f660 100644
--- a/resources/views/sales/invoices/item.blade.php
+++ b/resources/views/sales/invoices/item.blade.php
@@ -1,7 +1,7 @@
-<tr class="d-flex flex-nowrap" v-for="(row, index) in form.items"
+<tr v-for="(row, index) in form.items"
     :index="index">
     @stack('actions_td_start')
-        <td class="col-sm-1 text-center border-right-0 border-bottom-0 px-0">
+        <td class="text-center border-right-0 border-bottom-0">
             @stack('actions_button_start')
                 <button type="button"
                         @click="onDeleteItem(index)"
@@ -14,7 +14,7 @@
     @stack('actions_td_end')
 
     @stack('name_td_start')
-        <td class="col-sm-3 border-right-0 border-bottom-0">
+        <td class="border-right-0 border-bottom-0">
             @stack('name_input_start')
             <akaunting-select-remote
                 :form-classes="[{'has-error': form.errors.get('name') }]"
@@ -51,7 +51,7 @@
     @stack('name_td_end')
 
     @stack('quantity_td_start')
-        <td class="col-sm-1 border-right-0 border-bottom-0">
+        <td class="border-right-0 border-bottom-0">
             @stack('quantity_input_start')
                 <input class="form-control text-center"
                        autocomplete="off"
@@ -67,7 +67,7 @@
     @stack('quantity_td_end')
 
     @stack('price_td_start')
-        <td class="col-sm-2 border-right-0 border-bottom-0">
+        <td class="border-right-0 border-bottom-0 pb-0">
             @stack('price_input_start')
                 {{ Form::moneyGroup('name', '', '', ['required' => 'required', 'v-model' => 'row.price', 'data-item' => 'price', 'currency' => $currency, 'dynamic-currency' => 'currency', 'change' => 'row.price = $event; onCalculateTotal'], 0.00, 'text-right input-price') }}
                 <input name="items[][currency]"
@@ -81,7 +81,7 @@
     @stack('price_td_end')
 
     @stack('taxes_td_start')
-        <td class="col-sm-3 border-right-0 border-bottom-0">
+        <td class="border-right-0 border-bottom-0">
             @stack('tax_id_input_start')
             <akaunting-select
                 class="mb-0 select-tax"
@@ -123,7 +123,7 @@
     @stack('taxes_td_end')
 
     @stack('total_td_start')
-        <td class="col-sm-2 text-right total-column border-bottom-0 long-texts">
+        <td class="text-right total-column border-bottom-0 long-texts">
             <akaunting-money :col="'d-none'"
                 :masked="true"
                 :error="{{ 'form.errors.get("total")' }}"