Very slow render speed on iPhone, should I convert tables to div?

Question

I am running some pretty heavy tables on our mobile site, in fact they are so heavy that my iphone7s completely dies for up to 20 seconds before I can start scrolling up and down (safari browser, chrome is only 10 seconds).

The tables are rather heavy on styles and the page contain 8-12 tables with 5 to 50 rows each.

My question is, would it improve the render performance if I re-wrote the page to use DIVs everywhere instead of tables? Or would I just be wasting my time?

Any suggestions from experienced devs is very welcome.

Code from one of the tables (they all pretty much follow the same code std):

<!--Invoice Table-->
<table border="0" cellspacing="0" cellpadding="0" class="start-table start-invoice-table start-invoice-hover" ng-if="vm.invoice.length > 0">
<thead>
    <tr class="start-header start-bold start-invoice-bg">
        <th colspan="6" class="start-padding overflow start-left">
            Invoices to be paid by costumer
        </th>
    </tr>
    <tr class="start-header start-head start-invoice-bg">
        <th class="start-left nowrap" style="min-width:66px;">Property</th>
        <th class="start-left overflow" style="width:30%">Tenant/Agent</th>
        <th class="start-left overflow" style="width:25%">Text</th>
        <th class="start-right overflow" style="width:10%">Day</th>
        <th class="start-right overflow" style="width:10%">Paid</th>
        <th class="start-right overflow" style="width:15%">Amount</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="invoices in vm.invoice | orderBy:'days'" class="start-text" ui-sref="book({id: invoices.booking, property: 'INVOICE', checkin: invoices._id })">
        <td class="start-left start-border nowrap">
            <span class="chan chan-{{ invoices.source }}">{{ invoices.source }}</span>&nbsp;{{ invoices.property }}
        </td>
        <td class="start-left start-border overflow">
            <img ng-src="{{ vm.validateFlag(invoices.country) }}.png" class="start-flag">
            {{ invoices.name }}
            <span ng-if="invoices.agency && invoices.name.length < 15"> / {{invoices.agency}}</span>
        </td>
        <td class="start-left start-border overflow">{{ invoices.lineText }}</td>
        <td class="start-right start-border overflow start-bold">
            <span ng-class="(invoices.days) > -1 ? 'greennum' : 'rednum'"><b>{{invoices.days}}</b></span>
        </td>
        <td class="start-right start-border overflow">{{ invoices.receiptTotal | number }}</td>
        <td class="start-right start-border overflow"><b>{{ invoices.invoiceTotal | number }}</b></td>
    </tr>
</tbody>
</table>

Answer 1

You sometimes can speed up the rendering of tables by setting the table’s CSS property ‘table-layout’ to ‘fixed’. The browser will then take the first row of the table to calculate the widths of all its columns. So be sure to specify the width of columns in the first row in the CSS of the header.

Because no re-calculation has to be done, this will sometimes speed up the rendering of the table as the browser can render progressively each row.

This will however break the dynamic nature of rendering and may look ugly on some other device. So you might need different CSS for different devices ...

I originally learned this from Website for Internet Explorer