diff --git a/client/res/layout-types/list-row.tpl b/client/res/layout-types/list-row.tpl
index b9a6f7372b..2e7fe283aa 100644
--- a/client/res/layout-types/list-row.tpl
+++ b/client/res/layout-types/list-row.tpl
@@ -12,7 +12,13 @@
             align = defs.options.defs.align || false;
         }
     %>
-    <td class="cell" data-name="<%= defs.columnName %>" <% if (width) print(' width="'+width+'"'); if (align) print(' align="'+align+'"'); %>>
+    <td
+        class="cell"
+        data-name="<%= defs.columnName %>"
+        <% if (width || align) { %>
+        style="<% if (width) print('width: ' + width); %>;<% if (align) print(' text-align: ' + align);%>"
+        <% } %>
+    >
     <%
             var tag = 'tag' in defs ? defs.tag : false;
             if (tag) {
diff --git a/client/res/templates/admin/entity-manager/index.tpl b/client/res/templates/admin/entity-manager/index.tpl
index cb39705a55..974ecee08a 100644
--- a/client/res/templates/admin/entity-manager/index.tpl
+++ b/client/res/templates/admin/entity-manager/index.tpl
@@ -55,10 +55,10 @@
                 {{name}}
                 {{/if}}
             </td>
-            <td width="33%">
+            <td style="width: 33%">
                 {{label}}
             </td>
-            <td width="30%">
+            <td style="width: 30%">
                 {{#if type}}
                 {{translateOption type field='type' scope='EntityManager'}}
                 {{/if}}
diff --git a/client/res/templates/admin/field-manager/list.tpl b/client/res/templates/admin/field-manager/list.tpl
index 66ec7a5643..68153b4038 100644
--- a/client/res/templates/admin/field-manager/list.tpl
+++ b/client/res/templates/admin/field-manager/list.tpl
@@ -23,10 +23,10 @@
 
 <table class="table fields-table table-panel table-hover">
     <thead>
-        <th width="35%">{{translate 'Name' scope='FieldManager'}}</th>
-        <th width="35%">{{translate 'Label' scope='FieldManager'}}</th>
-        <th width="20%">{{translate 'Type' scope='FieldManager'}}</th>
-        <th width="10%" align="right"></th>
+        <th style="width: 35%">{{translate 'Name' scope='FieldManager'}}</th>
+        <th style="width: 35%">{{translate 'Label' scope='FieldManager'}}</th>
+        <th style="width: 20%">{{translate 'Type' scope='FieldManager'}}</th>
+        <th style="width: 10%; text-align: right;"></th>
     </thead>
     <tbody>
     {{#each fieldDefsArray}}
diff --git a/client/res/templates/admin/link-manager/index.tpl b/client/res/templates/admin/link-manager/index.tpl
index 294b425e3e..01c70017e9 100644
--- a/client/res/templates/admin/link-manager/index.tpl
+++ b/client/res/templates/admin/link-manager/index.tpl
@@ -42,53 +42,53 @@
     {{else}}
     <thead>
         <tr>
-            <th width="15%" align="left">{{translate 'entity' category='fields' scope='EntityManager'}}</th>
-            <th width="15%" align="left">{{translate 'linkForeign' category='fields' scope='EntityManager'}}</th>
-            <th width="10%" align="center" style="text-align: center">
+            <th style="width: 15%; text-align: left">{{translate 'entity' category='fields' scope='EntityManager'}}</th>
+            <th style="width: 15%; text-align: left">{{translate 'linkForeign' category='fields' scope='EntityManager'}}</th>
+            <th style="width: 10%; text-align: center">
                 {{translate 'linkType' category='fields' scope='EntityManager'}}
             </th>
-            <th width="15%" align="right" style="text-align: right">
+            <th style="width: 15%; text-align: right">
                 {{translate 'link' category='fields' scope='EntityManager'}}
             </th>
-            <th width="15%" align="right" style="text-align: right">
+            <th style="width: 15%; text-align: right">
                 {{translate 'entityForeign' category='fields' scope='EntityManager'}}
             </th>
-            <th width="10%"></th>
-            <th width="10%"></th>
+            <th style="width: 10%"></th>
+            <th style="width: 10%"></th>
         </tr>
     </thead>
     {{/unless}}
     {{#each linkDataList}}
     <tr data-link="{{link}}" class="link-row">
-        <td width="15%" align="left">
+        <td style="width: 15%; text-align: left">
             {{translate entity category='scopeNames'}}
         </td>
-        <td width="15%" align="left">
+        <td style="width: 15%; text-align: left">
             <span title="{{translate linkForeign category='links' scope=entityForeign}}">
                 {{linkForeign}}
             </span>
         </td>
-        <td width="10%" align="center">
+        <td style="width: 10%; text-align: center">
             <strong>
             {{translateOption type field='linkType' scope='EntityManager'}}
             </strong>
         </td>
-        <td width="15%" align="right">
+        <td style="width: 15%; text-align: right">
             <span title="{{translate link category='links' scope=entity}}">
                 {{link}}
             </span>
         </td>
-        <td width="15%" align="right">
+        <td style="width: 15%; text-align: right">
             {{translate entityForeign category='scopeNames'}}
         </td>
-        <td align="right" width="10%">
+        <td style="width: 10%; text-align: right">
             {{#if isEditable}}
                 <a role="button" tabindex="0" data-action="editLink" data-link="{{link}}">
                     {{translate 'Edit'}}
                 </a>
             {{/if}}
         </td>
-        <td align="right" width="10%">
+        <td style="width: 10%; ; text-align: right">
             {{#if isRemovable}}
             <a role="button" tabindex="0" data-action="removeLink" data-link="{{link}}">
                 {{translate 'Remove'}}
diff --git a/client/res/templates/admin/system-requirements/index.tpl b/client/res/templates/admin/system-requirements/index.tpl
index d7e546a82c..fa2907b910 100644
--- a/client/res/templates/admin/system-requirements/index.tpl
+++ b/client/res/templates/admin/system-requirements/index.tpl
@@ -7,8 +7,8 @@
         <thead>
             <tr>
                 <th><h5>{{translate 'PHP Settings' scope='Admin'}}</h5></th>
-                <th width="24%"></th>
-                <th width="24%"></th>
+                <th style="width: 24%"></th>
+                <th style="width: 24%"></th>
             </tr>
         </thead>
         <tbody>
@@ -37,8 +37,8 @@
         <thead>
             <tr>
                 <th><h5>{{translate 'Database Settings' scope='Admin'}}</h5></th>
-                <th width="24%"></th>
-                <th width="24%"></th>
+                <th style="width: 24%"></th>
+                <th style="width: 24%"></th>
             </tr>
         </thead>
         <tbody>
@@ -47,8 +47,8 @@
                     <td class="cell">
                         {{translate @key scope='Admin' category='systemRequirements'}}
                     </td>
-                    <td class="cell" width="24%">{{actual}}</td>
-                    <td class="cell" width="24%">
+                    <td class="cell" style="width: 24%">{{actual}}</td>
+                    <td class="cell" style="width: 24%">
                         {{#if acceptable}}
                         <span class="text-success">{{translate 'Success' scope='Admin'}}</span>
                         {{else}}
@@ -68,8 +68,8 @@
         <thead>
             <tr>
                 <th><h5>{{translate 'Permissions' scope='Admin'}}</h5></th>
-                <th width="24%"></th>
-                <th width="24%"></th>
+                <th style="width: 24%"></th>
+                <th style="width: 24%"></th>
             </tr>
         </thead>
         <tbody>
@@ -78,8 +78,8 @@
                     <td class="cell">
                         {{translate @key scope='Admin' category='systemRequirements'}}
                     </td>
-                    <td class="cell" width="24%">{{translate type scope='Admin' category='systemRequirements'}}</td>
-                    <td class="cell" width="24%">
+                    <td class="cell" style="width: 24%">{{translate type scope='Admin' category='systemRequirements'}}</td>
+                    <td class="cell" style="width: 24%">
                         {{#if acceptable}}
                         <span class="text-success">{{translate 'Success' scope='Admin'}}</span>
                         {{else}}
diff --git a/client/res/templates/modals/resolve-save-conflict.tpl b/client/res/templates/modals/resolve-save-conflict.tpl
index cb51c19571..70ab70301c 100644
--- a/client/res/templates/modals/resolve-save-conflict.tpl
+++ b/client/res/templates/modals/resolve-save-conflict.tpl
@@ -5,8 +5,8 @@
 <table class="table" style="table-layout: fixed;">
     <thead>
         <tr>
-            <th width="25%">{{translate 'Field'}}</th>
-            <th width="25%">{{translate 'Resolution'}}</th>
+            <th style="width: 25%">{{translate 'Field'}}</th>
+            <th style="width: 25%">{{translate 'Resolution'}}</th>
             <th>{{translate 'Value'}}</th>
         </tr>
     </thead>
@@ -31,4 +31,4 @@
         </tr>
     {{/each}}
     </tbody>
-</table>
\ No newline at end of file
+</table>
diff --git a/client/res/templates/personal-data/record/record.tpl b/client/res/templates/personal-data/record/record.tpl
index efa6d4690a..dfb2813283 100644
--- a/client/res/templates/personal-data/record/record.tpl
+++ b/client/res/templates/personal-data/record/record.tpl
@@ -3,8 +3,8 @@
     <table class="table table-bordered-inside">
         {{#if editAccess}}
             <tr>
-                <th width="20"><input type="checkbox" class="checkbox-all form-checkbox"></th>
-                <th width="30%"></th>
+                <th style="width: 20px"><input type="checkbox" class="checkbox-all form-checkbox"></th>
+                <th style="width: 30%"></th>
                 <th></th>
             </tr>
         {{/if}}
@@ -12,7 +12,7 @@
             <tr>
                 {{#if ../editAccess}}<td>{{#if editAccess}}
                     <input type="checkbox" class="checkbox form-checkbox" data-name="{{name}}">{{/if}}</td>{{/if}}
-                <td width="30%">{{translate name category='fields' scope=../scope}}</td>
+                <td style="width: 30%">{{translate name category='fields' scope=../scope}}</td>
                 <td>
                     <div class="field" data-name="{{name}}">{{{var key ../this}}}</div>
                 </td>
diff --git a/client/res/templates/record/list.tpl b/client/res/templates/record/list.tpl
index 27ce515aa3..2e921760e4 100644
--- a/client/res/templates/record/list.tpl
+++ b/client/res/templates/record/list.tpl
@@ -132,7 +132,10 @@
         <thead>
             <tr>
                 {{#if checkboxes}}
-                <th width="{{checkboxColumnWidth}}" data-name="r-checkbox">
+                <th
+                    style="width: {{checkboxColumnWidth}}"
+                    data-name="r-checkbox"
+                >
                     <span class="select-all-container"><input type="checkbox" class="select-all form-checkbox form-checkbox-small"></span>
                     {{#unless checkAllResultDisabled}}
                     <div class="btn-group checkbox-dropdown">
@@ -159,8 +162,7 @@
                 {{/if}}
                 {{#each headerDefs}}
                 <th
-                    {{#if width}}width="{{width}}"{{/if}}
-                    {{#if align}}style="text-align: {{align}};"{{/if}}
+                    style="{{#if width}}width: {{width}};{{/if}}{{#if align}} text-align: {{align}};{{/if}}"
                     {{#if className}}class="{{className}}"{{/if}}
                     {{#if name}}data-name="{{name}}"{{/if}}
                 >
diff --git a/client/res/templates/record/merge.tpl b/client/res/templates/record/merge.tpl
index 81be2cb85b..03797f7e04 100644
--- a/client/res/templates/record/merge.tpl
+++ b/client/res/templates/record/merge.tpl
@@ -3,9 +3,9 @@
     <table class="table table-bordered">
         <thead>
             <tr>
-                <th width="20%"></th>
+                <th style="width: 20%"></th>
                 {{#each dataList}}
-                <th width="5%" style="vertical-align: middle;">
+                <th style="vertical-align: middle; width: 5%">
                     <input
                         type="radio"
                         name="check-all"
@@ -14,7 +14,7 @@
                         class="pull-right form-radio"
                     >
                 </th>
-                <th width="{{../width}}%">
+                <th style="width: {{../width}}%">
                     <a href="#{{../scope}}/view/{{id}}" target="_BLANK" class="text-large">{{name}}</a>
                 </th>
                 {{/each}}
diff --git a/client/res/templates/role/table-edit.tpl b/client/res/templates/role/table-edit.tpl
index cbcb964448..859dabab39 100644
--- a/client/res/templates/role/table-edit.tpl
+++ b/client/res/templates/role/table-edit.tpl
@@ -8,9 +8,9 @@
             <table class="table table-bordered-inside no-margin scope-level">
                 <tr>
                     <th></th>
-                    <th width="20%">{{translate 'Access' scope='Role'}}</th>
+                    <th style="width: 20%">{{translate 'Access' scope='Role'}}</th>
                     {{#each actionList}}
-                        <th width="11%">{{translate this scope='Role' category='actions'}}</th>
+                        <th style="width: 11%">{{translate this scope='Role' category='actions'}}</th>
                     {{/each}}
                 </tr>
                 {{#each tableDataList}}
@@ -49,9 +49,9 @@
                 <table class="table borderless no-margin">
                     <tr>
                         <th></th>
-                        <th width="20%">{{translate 'Access' scope='Role'}}</th>
+                        <th style="width: 20%">{{translate 'Access' scope='Role'}}</th>
                         {{#each actionList}}
-                            <th width="11%">{{translate this scope='Role' category='actions'}}</th>
+                            <th style="width: 11%">{{translate this scope='Role' category='actions'}}</th>
                         {{/each}}
                     </tr>
                 </table>
@@ -70,11 +70,11 @@
             <table class="table table-bordered-inside no-margin field-level">
                 <tr>
                     <th></th>
-                    <th width="20%"></th>
+                    <th style="width: 20%"></th>
                     {{#each fieldActionList}}
-                        <th width="11%">{{translate this scope='Role' category='actions'}}</th>
+                        <th style="width: 11%">{{translate this scope='Role' category='actions'}}</th>
                     {{/each}}
-                    <th width="33%"></th>
+                    <th style="width: 33%"></th>
                 </tr>
                 {{#each fieldTableDataList}}
                     <tr>
@@ -124,11 +124,11 @@
                 <table class="table borderless no-margin">
                     <tr>
                         <th></th>
-                        <th width="20%"></th>
+                        <th style="width: 20%"></th>
                         {{#each fieldActionList}}
-                            <th width="11%">{{translate this scope='Role' category='actions'}}</th>
+                            <th style="width: 11%">{{translate this scope='Role' category='actions'}}</th>
                         {{/each}}
-                        <th width="33%"></th>
+                        <th style="width: 33%"></th>
                     </tr>
                 </table>
             </div>
diff --git a/client/res/templates/role/table.tpl b/client/res/templates/role/table.tpl
index e074fd60df..a0871baddf 100644
--- a/client/res/templates/role/table.tpl
+++ b/client/res/templates/role/table.tpl
@@ -8,9 +8,9 @@
             <table class="table table-bordered-inside no-margin scope-level">
                 <tr>
                     <th></th>
-                    <th width="20%">{{translate 'Access' scope='Role'}}</th>
+                    <th style="width: 20%">{{translate 'Access' scope='Role'}}</th>
                     {{#each actionList}}
-                        <th width="11%">{{translate this scope='Role' category='actions'}}</th>
+                        <th style="width: 11%">{{translate this scope='Role' category='actions'}}</th>
                     {{/each}}
                 </tr>
                 {{#each tableDataList}}
@@ -41,9 +41,9 @@
                 <table class="table borderless no-margin">
                     <tr>
                         <th></th>
-                        <th width="20%">{{translate 'Access' scope='Role'}}</th>
+                        <th style="width: 20%">{{translate 'Access' scope='Role'}}</th>
                         {{#each actionList}}
-                            <th width="11%">{{translate this scope='Role' category='actions'}}</th>
+                            <th style="width: 11%">{{translate this scope='Role' category='actions'}}</th>
                         {{/each}}
                     </tr>
                 </table>
@@ -63,11 +63,11 @@
             <table class="table table-bordered-inside no-margin field-level">
                 <tr>
                     <th></th>
-                    <th width="20%"></th>
+                    <th style="width: 20%"></th>
                     {{#each fieldActionList}}
-                        <th width="11%">{{translate this scope='Role' category='actions'}}</th>
+                        <th style="width: 11%">{{translate this scope='Role' category='actions'}}</th>
                     {{/each}}
-                    <th width="33%" ></th>
+                    <th style="width: 33%"></th>
                 </tr>
                 {{#each fieldTableDataList}}
                     {{#if list.length}}
@@ -98,11 +98,11 @@
                 <table class="table borderless no-margin">
                     <tr>
                         <th></th>
-                        <th width="20%"></th>
+                        <th style="width: 20%"></th>
                         {{#each fieldActionList}}
-                            <th width="11%">{{translate this scope='Role' category='actions'}}</th>
+                            <th style="width: 11%">{{translate this scope='Role' category='actions'}}</th>
                         {{/each}}
-                        <th width="33%"></th>
+                        <th style="width: 33%"></th>
                     </tr>
                 </table>
             </div>
diff --git a/client/src/views/record/list.js b/client/src/views/record/list.js
index 4d13418209..f7e616a21b 100644
--- a/client/src/views/record/list.js
+++ b/client/src/views/record/list.js
@@ -980,7 +980,7 @@ class ListRecordView extends View {
                 this.massActionList || this.buttonList.length || this.dropdownItemList.length,
             totalCountFormatted: this.getNumberUtil().formatInt(this.collection.total),
             moreCountFormatted: this.getNumberUtil().formatInt(moreCount),
-            checkboxColumnWidth: this.checkboxColumnWidth,
+            checkboxColumnWidth: this.checkboxColumnWidth + 'px',
             noDataDisabled: noDataDisabled,
         };
     }
@@ -2381,7 +2381,7 @@ class ListRecordView extends View {
                 width = this.listLayout[i].width + '%';
             }
             else if ('widthPx' in this.listLayout[i]) {
-                width = this.listLayout[i].widthPx;
+                width = this.listLayout[i].widthPx + 'px';
             }
 
             const itemName = this.listLayout[i].name;
@@ -2439,7 +2439,7 @@ class ListRecordView extends View {
             }
 
             defs.push({
-                width: this.rowActionsColumnWidth,
+                width: this.rowActionsColumnWidth + 'px',
                 html: html,
                 className: 'action-cell',
             });