diff --git a/web/explorer/explorer-server/code/address.js b/web/explorer/explorer-server/code/address.js
--- a/web/explorer/explorer-server/code/address.js
+++ b/web/explorer/explorer-server/code/address.js
@@ -250,43 +250,18 @@
 
 const renderSize = size => formatByteSize(size);
 
-const renderFee = (_value, _type, row) => {
-    if (row.isCoinbase) {
-        return '<div class="ui green horizontal label">Coinbase</div>';
-    }
-
-    const fee = renderInteger(
-        (row.stats.satsInput - row.stats.satsOutput) / 100,
-    );
-    let markup = '';
-
-    markup += `<span>${fee}</span>`;
-    markup += `<span class="fee-per-byte">&nbsp(${renderFeePerByte(
-        _value,
-        _type,
-        row,
-    )})</span>`;
-
-    return markup;
-};
-
-const renderFeePerByte = (_value, _type, row) => {
-    if (row.isCoinbase) {
-        return '';
-    }
-    const fee = row.stats.satsInput - row.stats.satsOutput;
-    const feePerByte = fee / row.size;
-    return renderInteger(Math.round(feePerByte * 1000)) + '/kB';
-};
-
 const renderAmountXEC = (_value, _type, row) => {
     if (row.stats.deltaSats < 0) {
-        return '<span>' + renderSats(row.stats.deltaSats) + ' XEC</span>';
+        return (
+            '<span class="num-col-suffix" data-suffix="XEC">' +
+            renderSats(row.stats.deltaSats) +
+            '</span>'
+        );
     } else
         return (
-            '<span style="color:#15ee3e">+' +
+            '<span style="color:#15ee3e" class="num-col-suffix" data-suffix="XEC">+' +
             renderSats(row.stats.deltaSats) +
-            ' XEC</span>'
+            '</span>'
         );
 };
 
@@ -384,6 +359,8 @@
                 title: 'Size',
                 render: renderSize,
                 orderSequence: ['desc', 'asc'],
+                type: 'file-size',
+                targets: 0,
             },
             {
                 name: 'fee',
diff --git a/web/explorer/explorer-server/code/common.js b/web/explorer/explorer-server/code/common.js
--- a/web/explorer/explorer-server/code/common.js
+++ b/web/explorer/explorer-server/code/common.js
@@ -17,11 +17,19 @@
 
 function formatByteSize(size) {
     if (size < 1024) {
-        return size + ' B';
+        return '<div class="num-col-suffix" data-suffix="B">' + size + '</div>';
     } else if (size < 1024 * 1024) {
-        return (size / 1000).toFixed(2) + ' kB';
+        return (
+            '<div class="num-col-suffix" data-suffix="kB">' +
+            (size / 1000).toFixed(2) +
+            '</div>'
+        );
     } else {
-        return (size / 1000000).toFixed(2) + ' MB';
+        return (
+            '<div class="num-col-suffix" data-suffix="MB">' +
+            (size / 1000000).toFixed(2) +
+            '</div>'
+        );
     }
 }
 
@@ -77,6 +85,34 @@
     }
 }
 
+const renderFee = (_value, _type, row) => {
+    if (row.isCoinbase) {
+        return '<div class="ui green horizontal label">Coinbase</div>';
+    }
+
+    const fee = renderInteger(
+        (row.stats.satsInput - row.stats.satsOutput) / 100,
+    );
+    let markup = '';
+
+    markup += `<div class="num-col-suffix fee-per-byte" data-suffix="(${renderFeePerByte(
+        _value,
+        _type,
+        row,
+    )})">${fee}</div>`;
+
+    return markup;
+};
+
+const renderFeePerByte = (_value, _type, row) => {
+    if (row.isCoinbase) {
+        return '';
+    }
+    const fee = row.stats.satsInput - row.stats.satsOutput;
+    const feePerByte = fee / row.size;
+    return renderInteger(Math.round(feePerByte * 1000)) + '/kB';
+};
+
 function renderTxHash(txHash) {
     return txHash.substr(0, 10) + '&hellip;' + txHash.substr(60, 4);
 }
diff --git a/web/explorer/explorer-server/code/styles/index.css b/web/explorer/explorer-server/code/styles/index.css
--- a/web/explorer/explorer-server/code/styles/index.css
+++ b/web/explorer/explorer-server/code/styles/index.css
@@ -258,6 +258,15 @@
     text-align: right;
 }
 
+.num-col-suffix::after {
+    content: attr(data-suffix);
+    margin-left: 4px;
+}
+
+.fee-per-byte::after {
+    color: gray;
+}
+
 #footer {
     width: 100%;
     height: 50px;
@@ -632,11 +641,6 @@
     overflow: visible;
 }
 
-#txs-table .fee-per-byte {
-    margin-left: 3px;
-    color: grey;
-}
-
 #txs-table small {
     opacity: 0.7;
 }
diff --git a/web/explorer/explorer-server/code/txs.js b/web/explorer/explorer-server/code/txs.js
--- a/web/explorer/explorer-server/code/txs.js
+++ b/web/explorer/explorer-server/code/txs.js
@@ -19,33 +19,6 @@
 var bchDate = 1502193600;
 
 const renderSize = size => formatByteSize(size);
-const renderFee = (_value, _type, row) => {
-    if (row.isCoinbase) {
-        return '<div class="ui green horizontal label">Coinbase</div>';
-    }
-
-    const fee = renderInteger(
-        (row.stats.satsInput - row.stats.satsOutput) / 100,
-    );
-    let markup = '';
-
-    markup += `<span>${fee}</span>`;
-    markup += `<span class="fee-per-byte">(${renderFeePerByte(
-        _value,
-        _type,
-        row,
-    )})</span>`;
-
-    return markup;
-};
-const renderFeePerByte = (_value, _type, row) => {
-    if (row.isCoinbase) {
-        return '';
-    }
-    const fee = row.stats.satsInput - row.stats.satsOutput;
-    const feePerByte = fee / row.size;
-    return renderInteger(Math.round(feePerByte * 1000)) + '/kB';
-};
 
 const renderInput = data => {
     const txDate = data.timestamp;
@@ -76,14 +49,18 @@
 const renderOutput = (satsOutput, _type, row) => {
     if (row.token) {
         var ticker =
-            ' <a href="/tx/' +
+            '<a href="/tx/' +
             row.txHash +
-            '">' +
+            '" class="num-col-suffix" data-suffix=' +
             row.token.tokenTicker +
-            '</a>';
+            '></a>';
         return renderAmount(row.stats.tokenOutput, row.token.decimals) + ticker;
     }
-    return renderSats(row.stats.satsOutput) + ' XEC';
+    return (
+        '<div class="num-col-suffix" data-suffix="XEC">' +
+        renderSats(row.stats.satsOutput) +
+        '</div>'
+    );
 };
 
 const updateLoading = status => {
@@ -148,6 +125,8 @@
                 render: renderSize,
                 className: 'text-right',
                 orderSequence: ['desc', 'asc'],
+                type: 'file-size',
+                targets: 0,
             },
             {
                 name: 'fee',
@@ -156,6 +135,7 @@
                 render: renderFee,
                 className: 'text-right',
                 orderSequence: ['desc', 'asc'],
+                type: 'html-num-fmt',
             },
             {
                 data: { numInputs: 'numInputs' },