treewide: convert HTML tables to div

Mostly convert HTML tables to div based markup to allow for easier styling
in the future. Also change JS accessor code accordingly.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

7 files changed, 382 insertions, 425 deletions

diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/bandwidth.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/bandwidth.htm
index 33bbee7843..db1d0b8883 100644
--- a/modules/luci-mod-admin-full/luasrc/view/admin_status/bandwidth.htm
+++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/bandwidth.htm
@@ -275,27 +275,27 @@
 <div style="text-align:right"><small id="scale">-</small></div>
 <br />
 
-<table style="width:100%; table-layout:fixed" cellspacing="5">
-	<tr>
-		<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Inbound:%></strong></td>
-		<td id="rx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
-
-		<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
-		<td id="rx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
-
-		<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
-		<td id="rx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
-	</tr>
-	<tr>
-		<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Outbound:%></strong></td>
-		<td id="tx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
-
-		<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
-		<td id="tx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
-
-		<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
-		<td id="tx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
-	</tr>
-</table>
+<div class="table" style="width:100%; table-layout:fixed" cellspacing="5">
+	<div class="tr">
+		<div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Inbound:%></strong></div>
+		<div class="td" id="rx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div>
+
+		<div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
+		<div class="td" id="rx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div>
+
+		<div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
+		<div class="td" id="rx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div>
+	</div>
+	<div class="tr">
+		<div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Outbound:%></strong></div>
+		<div class="td" id="tx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div>
+
+		<div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
+		<div class="td" id="tx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div>
+
+		<div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
+		<div class="td" id="tx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div>
+	</div>
+</div>
 
 <%+footer%>
diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm
index b7ebc41451..30d93f78bc 100644
--- a/modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm
+++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm
@@ -139,8 +139,8 @@
 					{
 						var conn = json.connections;
 
-						while (conn_table.rows.length > 1)
-							conn_table.rows[0].parentNode.deleteRow(-1);
+						while (conn_table.firstElementChild !== conn_table.lastElementChild)
+							conn_table.removeChild(conn_table.lastElementChild);
 
 
 						var lookup_queue = [ ];
@@ -153,13 +153,10 @@
 						{
 							var c  = conn[i];
 
-							if ((c.src == '127.0.0.1' && c.dst == '127.0.0.1')
-							|| (c.src == '::1' && c.dst == '::1'))
+							if ((c.src == '127.0.0.1' && c.dst == '127.0.0.1') ||
+							    (c.src == '::1'       && c.dst == '::1'))
 								continue;
 
-							var tr = conn_table.rows[0].parentNode.insertRow(-1);
-							    tr.className = 'cbi-section-table-row cbi-rowstyle-' + (1 + (i % 2));
-
 							if (!dns_cache[c.src])
 								lookup_queue.push(c.src);
 
@@ -169,14 +166,13 @@
 							var src = dns_cache[c.src] || (c.layer3 == 'ipv6' ? '[' + c.src + ']' : c.src);
 							var dst = dns_cache[c.dst] || (c.layer3 == 'ipv6' ? '[' + c.dst + ']' : c.dst);
 
-							tr.insertCell(-1).innerHTML = c.layer3.toUpperCase();
-							tr.insertCell(-1).innerHTML = c.layer4.toUpperCase();
-							tr.insertCell(-1).innerHTML = String.format('%s:%d', src, c.sport);
-							tr.insertCell(-1).innerHTML = String.format('%s:%d', dst, c.dport);
-
-							var traf = tr.insertCell(-1);
-							    traf.style.whiteSpace = 'nowrap';
-							    traf.innerHTML = String.format('%1024.2mB (%d <%:Pkts.%>)', c.bytes, c.packets);
+							conn_table.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format(1 + (i % 2)), [
+								E('<div class="td">', c.layer3.toUpperCase()),
+								E('<div class="td">', c.layer4.toUpperCase()),
+								E('<div class="td">', [ src, ':', c.sport ]),
+								E('<div class="td">', [ dst, ':', c.dport ]),
+								E('<div class="td" style="white-space:nowrap">', '%1024.2mB (%d <%:Pkts.%>)'.format(c.bytes, c.packets)),
+							]));
 						}
 
 						if (lookup_queue.length > 0)
@@ -324,52 +320,52 @@
 	<div style="text-align:right"><small id="scale">-</small></div>
 	<br />
 
-	<table style="width:100%; table-layout:fixed" cellspacing="5">
-		<tr>
-			<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:UDP:%></strong></td>
-			<td id="lb_udp_cur">0</td>
-
-			<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
-			<td id="lb_udp_avg">0</td>
-
-			<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
-			<td id="lb_udp_peak">0</td>
-		</tr>
-		<tr>
-			<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:TCP:%></strong></td>
-			<td id="lb_tcp_cur">0</td>
-
-			<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
-			<td id="lb_tcp_avg">0</td>
-
-			<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
-			<td id="lb_tcp_peak">0</td>
-		</tr>
-		<tr>
-			<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Other:%></strong></td>
-			<td id="lb_otr_cur">0</td>
-
-			<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
-			<td id="lb_otr_avg">0</td>
-
-			<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
-			<td id="lb_otr_peak">0</td>
-		</tr>
-	</table>
+	<div class="table" style="width:100%; table-layout:fixed" cellspacing="5">
+		<div class="tr">
+			<div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:UDP:%></strong></div>
+			<div class="td" id="lb_udp_cur">0</div>
+
+			<div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
+			<div class="td" id="lb_udp_avg">0</div>
+
+			<div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
+			<div class="td" id="lb_udp_peak">0</div>
+		</div>
+		<div class="tr">
+			<div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:TCP:%></strong></div>
+			<div class="td" id="lb_tcp_cur">0</div>
+
+			<div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
+			<div class="td" id="lb_tcp_avg">0</div>
+
+			<div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
+			<div class="td" id="lb_tcp_peak">0</div>
+		</div>
+		<div class="tr">
+			<div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Other:%></strong></div>
+			<div class="td" id="lb_otr_cur">0</div>
+
+			<div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
+			<div class="td" id="lb_otr_avg">0</div>
+
+			<div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
+			<div class="td" id="lb_otr_peak">0</div>
+		</div>
+	</div>
 	<br />
 
 	<div class="cbi-section-node">
-		<table class="cbi-section-table" id="connections">
-			<tr class="cbi-section-table-titles">
-				<th class="cbi-section-table-cell"><%:Network%></th>
-				<th class="cbi-section-table-cell"><%:Protocol%></th>
-				<th class="cbi-section-table-cell"><%:Source%></th>
-				<th class="cbi-section-table-cell"><%:Destination%></th>
-				<th class="cbi-section-table-cell"><%:Transfer%></th>
-			</tr>
-
-			<tr><td colspan="5"><em><%:Collecting data...%></em></td></tr>
-		</table>
+		<div class="table cbi-section-table" id="connections">
+			<div class="tr cbi-section-table-titles">
+				<div class="th cbi-section-table-cell"><%:Network%></div>
+				<div class="th cbi-section-table-cell"><%:Protocol%></div>
+				<div class="th cbi-section-table-cell"><%:Source%></div>
+				<div class="th cbi-section-table-cell"><%:Destination%></div>
+				<div class="th cbi-section-table-cell"><%:Transfer%></div>
+			</div>
+
+			<div class="tr"><div class="td" colspan="5"><em><%:Collecting data...%></em></div></div>
+		</div>
 	</div>
 </fieldset>
 
diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/index.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/index.htm
index 5e6e494ad6..a72936f321 100644
--- a/modules/luci-mod-admin-full/luasrc/view/admin_status/index.htm
+++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/index.htm
@@ -235,7 +235,7 @@
 					'<strong><%:Type%>: </strong>%s%s<br />',
 						ifc6.proto, (ifc6.ip6prefix) ? '-pd' : ''
 				);
-				
+
 				if (!ifc6.ip6prefix)
 				{
 					s += String.format(
@@ -358,10 +358,10 @@
 			if (ls)
 			{
 				/* clear all rows */
-				while( ls.rows.length > 1 )
-					ls.rows[0].parentNode.deleteRow(1);
+				while (ls.firstElementChild !== ls.lastElementChild)
+					ls.removeChild(ls.lastElementChild);
 
-				for( var i = 0; i < info.leases.length; i++ )
+				for (var i = 0; i < info.leases.length; i++)
 				{
 					var timestr;
 
@@ -372,24 +372,16 @@
 					else
 						timestr = String.format('%t', info.leases[i].expires);
 
-					var tr = ls.rows[0].parentNode.insertRow(-1);
-						tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
-
-					tr.insertCell(-1).innerHTML = info.leases[i].hostname ? info.leases[i].hostname : '?';
-					tr.insertCell(-1).innerHTML = info.leases[i].ipaddr;
-					tr.insertCell(-1).innerHTML = info.leases[i].macaddr;
-					tr.insertCell(-1).innerHTML = timestr;
+					ls.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [
+						E('<div class="td">', info.leases[i].hostname ? info.leases[i].hostname : '?'),
+						E('<div class="td">', info.leases[i].ipaddr),
+						E('<div class="td">', info.leases[i].macaddr),
+						E('<div class="td">', timestr)
+					]));
 				}
 
-				if( ls.rows.length == 1 )
-				{
-					var tr = ls.rows[0].parentNode.insertRow(-1);
-						tr.className = 'cbi-section-table-row';
-
-					var td = tr.insertCell(-1);
-						td.colSpan = 4;
-						td.innerHTML = '<em><br /><%:There are no active leases.%></em>';
-				}
+				if (ls.firstElementChild === ls.lastElementChild)
+					ls.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active leases.%></em></div></div>'));
 			}
 
 			var ls6 = document.getElementById('lease6_status_table');
@@ -398,10 +390,10 @@
 				ls6.parentNode.style.display = 'block';
 
 				/* clear all rows */
-				while( ls6.rows.length > 1 )
-					ls6.rows[0].parentNode.deleteRow(1);
+				while (ls6.firstElementChild !== ls6.lastElementChild)
+					ls6.removeChild(ls6.lastElementChild);
 
-				for( var i = 0; i < info.leases6.length; i++ )
+				for (var i = 0; i < info.leases6.length; i++)
 				{
 					var timestr;
 
@@ -412,35 +404,29 @@
 					else
 						timestr = String.format('%t', info.leases6[i].expires);
 
-					var tr = ls6.rows[0].parentNode.insertRow(-1);
-						tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
-
-					var host = hosts[duid2mac(info.leases6[i].duid)];
-					if (!info.leases6[i].hostname)
-						tr.insertCell(-1).innerHTML =
-							(host && (host.name || host.ipv4 || host.ipv6))
-								? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">? (%h)</div>'.format(host.name || host.ipv4 || host.ipv6)
-								: '?';
-					else
-						tr.insertCell(-1).innerHTML =
-							(host && host.name && info.leases6[i].hostname != host.name)
-								? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">%h (%h)</div>'.format(info.leases6[i].hostname, host.name)
-								: info.leases6[i].hostname;
-
-					tr.insertCell(-1).innerHTML = info.leases6[i].ip6addr;
-					tr.insertCell(-1).innerHTML = info.leases6[i].duid;
-					tr.insertCell(-1).innerHTML = timestr;
-				}
+					var host = hosts[duid2mac(info.leases6[i].duid)],
+					    name = info.leases6[i].hostname,
+					    hint = null;
 
-				if( ls6.rows.length == 1 )
-				{
-					var tr = ls6.rows[0].parentNode.insertRow(-1);
-						tr.className = 'cbi-section-table-row';
+					if (!name) {
+						if (host)
+							hint = host.name || host.ipv4 || host.ipv6;
+					}
+					else {
+						if (host && host.name && info.leases6[i].hostname != host.name)
+							hint = host.name;
+					}
 
-					var td = tr.insertCell(-1);
-						td.colSpan = 4;
-						td.innerHTML = '<em><br /><%:There are no active leases.%></em>';
+					ls6.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d" style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">'.format((i % 2) + 1), [
+						E('<div class="td">', hint ? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">%h (%h)</div>'.format(name || '?', hint) : (name || '?')),
+						E('<div class="td">', info.leases6[i].ip6addr),
+						E('<div class="td">', info.leases6[i].duid),
+						E('<div class="td">', timestr)
+					]));
 				}
+
+				if (ls6.firstElementChild === ls6.lastElementChild)
+					ls6.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active leases.%></em></div></div>'));
 			}
 			<% end %>
 
@@ -450,24 +436,12 @@
 			var ws = document.getElementById('wifi_status_table');
 			if (ws)
 			{
-				var wsbody = ws.rows[0].parentNode;
-				while (ws.rows.length > 0)
-					wsbody.deleteRow(0);
+				while (ws.lastElementChild)
+					ws.removeChild(ws.lastElementChild);
 
 				for (var didx = 0; didx < info.wifinets.length; didx++)
 				{
 					var dev = info.wifinets[didx];
-
-					var tr = wsbody.insertRow(-1);
-					var td;
-
-					td = tr.insertCell(-1);
-					td.width     = "33%";
-					td.innerHTML = dev.name;
-					td.style.verticalAlign = "top";
-
-					td = tr.insertCell(-1);
-
 					var s = '';
 
 					for (var nidx = 0; nidx < dev.networks.length; nidx++)
@@ -490,10 +464,10 @@
 							icon = "<%=resource%>/icons/signal-75-100.png";
 
 						s += String.format(
-							'<table><tr><td style="text-align:center; width:32px; padding:3px">' +
+							'<div class="table"><div class="tr"><div class="td" style="text-align:center; width:32px; padding:3px">' +
 								'<img src="%s" title="<%:Signal%>: %d dBm / <%:Noise%>: %d dBm" />' +
 								'<br /><small>%d%%</small>' +
-							'</td><td style="text-align:left; padding:3px"><small>' +
+							'</div><div class="td" style="text-align:left; padding:3px"><small>' +
 								'<strong><%:SSID%>:</strong> <a href="%s">%h</a><br />' +
 								'<strong><%:Mode%>:</strong> %s<br />' +
 								'<strong><%:Channel%>:</strong> %d (%.3f <%:GHz%>)<br />' +
@@ -520,7 +494,7 @@
 							s += '<em><%:Wireless is disabled or not associated%></em>';
 						}
 
-						s += '</small></td></tr></table>';
+						s += '</small></div></div></div>';
 
 						for (var bssid in net.assoclist)
 						{
@@ -539,7 +513,10 @@
 					if (!s)
 						s = '<em><%:No information available%></em>';
 
-					td.innerHTML = s;
+					ws.appendChild(E('<div class="tr">', [
+						E('<div class="td left" width="33%" style="vertical-align:top">', dev.name),
+						E('<div class="td">', s)
+					]));
 				}
 			}
 
@@ -547,8 +524,8 @@
 			if (ac)
 			{
 				/* clear all rows */
-				while( ac.rows.length > 1 )
-					ac.rows[0].parentNode.deleteRow(1);
+				while (ac.firstElementChild !== ac.lastElementChild)
+					ac.removeChild(ac.lastElementChild);
 
 				assoclist.sort(function(a, b) {
 					return (a.name == b.name)
@@ -557,11 +534,8 @@
 					;
 				});
 
-				for( var i = 0; i < assoclist.length; i++ )
+				for (var i = 0; i < assoclist.length; i++)
 				{
-					var tr = ac.rows[0].parentNode.insertRow(-1);
-						tr.className = 'cbi-section-table-row cbi-rowstyle-' + (1 + (i % 2));
-
 					var icon;
 					var q = (-1 * (assoclist[i].noise - assoclist[i].signal)) / 5;
 					if (q < 1)
@@ -575,49 +549,31 @@
 					else
 						icon = "<%=resource%>/icons/signal-75-100.png";
 
-					tr.insertCell(-1).innerHTML = String.format(
-						'<span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> %h</span>',
-						assoclist[i].radio, assoclist[i].ifname
-					);
-
-					tr.insertCell(-1).innerHTML = String.format(
-						'<a href="%s">%s</a>',
-							assoclist[i].link,
-							'%h'.format(assoclist[i].name).nobr()
-					);
-
-					tr.insertCell(-1).innerHTML = assoclist[i].bssid;
-
-					var host = hosts[assoclist[i].bssid];
-					if (host)
-						tr.insertCell(-1).innerHTML = String.format(
-							'<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis">%s</div>',
-							((host.name && (host.ipv4 || host.ipv6))
-								? '%h (%s)'.format(host.name, host.ipv4 || host.ipv6)
-								: '%h'.format(host.name || host.ipv4 || host.ipv6)).nobr()
-						);
-					else
-						tr.insertCell(-1).innerHTML = '?';
-
-					tr.insertCell(-1).innerHTML = String.format(
-						'<span class="ifacebadge" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%> / <%:SNR%>: %d"><img src="%s" /> %d / %d <%:dBm%></span>',
-						assoclist[i].signal, assoclist[i].noise, assoclist[i].signal - assoclist[i].noise,
-						icon,
-						assoclist[i].signal, assoclist[i].noise
-					);
-
-					tr.insertCell(-1).innerHTML = wifirate(assoclist[i], true).nobr() + '<br />' + wifirate(assoclist[i], false).nobr();
+					var host = hosts[assoclist[i].bssid],
+					    name = host ? (host.name || host.ipv4 || host.ipv6) : null,
+					    hint = (host && host.name && (host.ipv4 || host.ipv6)) ? (host.ipv4 || host.ipv6) : null;
+
+					ac.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format(1 + (i % 2)), [
+						E('<div class="td"><span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> %h</span></div>'
+							.format(assoclist[i].radio, assoclist[i].ifname)),
+						E('<div class="td"><a href="%s" style="white-space:nowrap">%h</a></div>'
+							.format(assoclist[i].link, assoclist[i].name)),
+						E('<div class="td">',
+							assoclist[i].bssid),
+						E('<div class="td">',
+							hint ? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis">%h (%h)</div>'.format(name || '?', hint) : (name || '?')),
+						E('<div class="td"><span class="ifacebadge" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%> / <%:SNR%>: %d"><img src="%s" /> %d / %d <%:dBm%></span></div>'
+							.format(assoclist[i].signal, assoclist[i].noise, assoclist[i].signal - assoclist[i].noise, icon, assoclist[i].signal, assoclist[i].noise)),
+						E('<div class="td">', [
+							E('<span style="white-space:nowrap">', wifirate(assoclist[i], true)),
+							E('<br />'),
+							E('<span style="white-space:nowrap">', wifirate(assoclist[i], false))
+						])
+					]));
 				}
 
-				if (ac.rows.length == 1)
-				{
-					var tr = ac.rows[0].parentNode.insertRow(-1);
-						tr.className = 'cbi-section-table-row';
-
-					var td = tr.insertCell(-1);
-						td.colSpan = 7;
-						td.innerHTML = '<br /><em><%:No information available%></em>';
-				}
+				if (ac.firstElementChild === ac.lastElementChild)
+					ac.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:No information available%></em></div></div>'));
 			}
 			<% end %>
 
@@ -679,108 +635,113 @@
 <fieldset class="cbi-section">
 	<legend><%:System%></legend>
 
-	<table width="100%" cellspacing="10">
-		<tr><td width="33%"><%:Hostname%></td><td><%=luci.sys.hostname() or "?"%></td></tr>
-		<tr><td width="33%"><%:Model%></td><td><%=pcdata(boardinfo.model or boardinfo.system or "?")%></td></tr>
-		<tr><td width="33%"><%:Firmware Version%></td><td>
+	<div class="table" width="100%">
+		<div class="tr"><div class="td left" width="33%"><%:Hostname%></div><div class="td left"><%=luci.sys.hostname() or "?"%></div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Model%></div><div class="td left"><%=pcdata(boardinfo.model or boardinfo.system or "?")%></div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Firmware Version%></div><div class="td left">
 			<%=pcdata(ver.distname)%> <%=pcdata(ver.distversion)%> /
 			<%=pcdata(ver.luciname)%> (<%=pcdata(ver.luciversion)%>)
-		</td></tr>
-		<tr><td width="33%"><%:Kernel Version%></td><td><%=unameinfo.release or "?"%></td></tr>
-		<tr><td width="33%"><%:Local Time%></td><td id="localtime">-</td></tr>
-		<tr><td width="33%"><%:Uptime%></td><td id="uptime">-</td></tr>
-		<tr><td width="33%"><%:Load Average%></td><td id="loadavg">-</td></tr>
-	</table>
+		</div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Kernel Version%></div><div class="td left"><%=unameinfo.release or "?"%></div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Local Time%></div><div class="td left" id="localtime">-</div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Uptime%></div><div class="td left" id="uptime">-</div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Load Average%></div><div class="td left" id="loadavg">-</div></div>
+	</div>
 </fieldset>
 
 <fieldset class="cbi-section">
 	<legend><%:Memory%></legend>
 
-	<table width="100%" cellspacing="10">
-		<tr><td width="33%"><%:Total Available%></td><td id="memtotal">-</td></tr>
-		<tr><td width="33%"><%:Free%></td><td id="memfree">-</td></tr>
-		<tr><td width="33%"><%:Buffered%></td><td id="membuff">-</td></tr>
-	</table>
+	<div class="table" width="100%">
+		<div class="tr"><div class="td left" width="33%"><%:Total Available%></div><div class="td left" id="memtotal">-</div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Free%></div><div class="td left" id="memfree">-</div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Buffered%></div><div class="td left" id="membuff">-</div></div>
+	</div>
 </fieldset>
 
 <% if swapinfo.total > 0 then %>
 <fieldset class="cbi-section">
 	<legend><%:Swap%></legend>
 
-	<table width="100%" cellspacing="10">
-		<tr><td width="33%"><%:Total Available%></td><td id="swaptotal">-</td></tr>
-		<tr><td width="33%"><%:Free%></td><td id="swapfree">-</td></tr>
-	</table>
+	<div class="table" width="100%">
+		<div class="tr"><div class="td left" width="33%"><%:Total Available%></div><div class="td left" id="swaptotal">-</div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Free%></div><div class="td left" id="swapfree">-</div></div>
+	</div>
 </fieldset>
 <% end %>
 
 <fieldset class="cbi-section">
 	<legend><%:Network%></legend>
 
-	<table width="100%" cellspacing="10">
-		<tr><td width="33%" style="vertical-align:top"><%:IPv4 WAN Status%></td><td>
-			<table><tr>
-				<td id="wan4_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></td>
-				<td id="wan4_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></td>
-			</tr></table>
-		</td></tr>
+	<div class="table" width="100%">
+		<div class="tr"><div class="td left" width="33%" style="vertical-align:top"><%:IPv4 WAN Status%></div><div class="td">
+			<div class="table"><div class="tr">
+				<div class="td" id="wan4_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></div>
+				<div class="td left" id="wan4_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></div>
+			</div></div>
+		</div></div>
 		<% if has_ipv6 then %>
-		<tr><td width="33%" style="vertical-align:top"><%:IPv6 WAN Status%></td><td>
-			<table><tr>
-				<td id="wan6_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></td>
-				<td id="wan6_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></td>
-			</tr></table>
-		</td></tr>
+		<div class="tr"><div class="td left" width="33%" style="vertical-align:top"><%:IPv6 WAN Status%></div><div class="td">
+			<div class="table"><div class="tr">
+				<div class="td" id="wan6_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></div>
+				<div class="td left" id="wan6_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></div>
+			</div></div>
+		</div></div>
 		<% end %>
-		<tr><td width="33%"><%:Active Connections%></td><td id="conns">-</td></tr>
-	</table>
+		<div class="tr"><div class="td left" width="33%"><%:Active Connections%></div><div class="td left" id="conns">-</div></div>
+	</div>
 </fieldset>
 
 <% if has_dhcp then %>
 <fieldset class="cbi-section">
 	<legend><%:DHCP Leases%></legend>
 
-	<table class="cbi-section-table" id="lease_status_table">
-		<tr class="cbi-section-table-titles">
-			<th class="cbi-section-table-cell"><%:Hostname%></th>
-			<th class="cbi-section-table-cell"><%:IPv4-Address%></th>
-			<th class="cbi-section-table-cell"><%:MAC-Address%></th>
-			<th class="cbi-section-table-cell"><%:Leasetime remaining%></th>
-		</tr>
-		<tr class="cbi-section-table-row">
-			<td colspan="4"><em><br /><%:Collecting data...%></em></td>
-		</tr>
-	</table>
+	<div class="table cbi-section-table" id="lease_status_table">
+		<div class="tr cbi-section-table-titles">
+			<div class="th"><%:Hostname%></div>
+			<div class="th"><%:IPv4-Address%></div>
+			<div class="th"><%:MAC-Address%></div>
+			<div class="th"><%:Leasetime remaining%></div>
+		</div>
+		<div class="tr cbi-section-table-row">
+			<div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div>
+		</div>
+	</div>
 </fieldset>
 
 <fieldset class="cbi-section" style="display:none">
 	<legend><%:DHCPv6 Leases%></legend>
 
-	<table class="cbi-section-table" id="lease6_status_table">
-		<tr class="cbi-section-table-titles">
-			<th class="cbi-section-table-cell"><%:Host%></th>
-			<th class="cbi-section-table-cell"><%:IPv6-Address%></th>
-			<th class="cbi-section-table-cell"><%:DUID%></th>
-			<th class="cbi-section-table-cell"><%:Leasetime remaining%></th>
-		</tr>
-		<tr class="cbi-section-table-row">
-			<td colspan="4"><em><br /><%:Collecting data...%></em></td>
-		</tr>
-	</table>
+	<div class="table cbi-section-table" id="lease6_status_table">
+		<div class="tr cbi-section-table-titles">
+			<div class="th"><%:Host%></div>
+			<div class="th"><%:IPv6-Address%></div>
+			<div class="th"><%:DUID%></div>
+			<div class="th"><%:Leasetime remaining%></div>
+		</div>
+		<div class="tr cbi-section-table-row">
+			<div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div>
+		</div>
+	</div>
 </fieldset>
 <% end %>
 
 <% if has_dsl then %>
 <fieldset class="cbi-section">
-       <legend><%:DSL%></legend>
-       <table width="100%" cellspacing="10">
-               <tr><td width="33%" style="vertical-align:top"><%:DSL Status%></td><td>
-                       <table><tr>
-                               <td id="dsl_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></td>
-                               <td id="dsl_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></td>
-                       </tr></table>
-               </td></tr>
-       </table>
+	<legend><%:DSL%></legend>
+	<div class="table" width="100%">
+		<div class="tr">
+			<div class="td left" width="33%" style="vertical-align:top"><%:DSL Status%></div>
+			<div class="td">
+				<div class="table">
+					<div class="tr">
+						<div class="td" id="dsl_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></div>
+						<div class="td left" id="dsl_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </fieldset>
 <% end %>
 
@@ -788,27 +749,27 @@
 <fieldset class="cbi-section">
 	<legend><%:Wireless%></legend>
 
-	<table id="wifi_status_table" width="100%" cellspacing="10">
-		<tr><td><em><%:Collecting data...%></em></td></tr>
-	</table>
+	<div class="table" id="wifi_status_table" width="100%">
+		<div class="tr"><div class="td"><em><%:Collecting data...%></em></div></div>
+	</div>
 </fieldset>
 
 <fieldset class="cbi-section">
 	<legend><%:Associated Stations%></legend>
 
-	<table class="cbi-section-table valign-middle" id="wifi_assoc_table">
-		<tr class="cbi-section-table-titles">
-			<th class="cbi-section-table-cell">&#160;</th>
-			<th class="cbi-section-table-cell"><%:Network%></th>
-			<th class="cbi-section-table-cell"><%:MAC-Address%></th>
-			<th class="cbi-section-table-cell"><%:Host%></th>
-			<th class="cbi-section-table-cell"><%:Signal%> / <%:Noise%></th>
-			<th class="cbi-section-table-cell"><%:RX Rate%> / <%:TX Rate%></th>
-		</tr>
-		<tr class="cbi-section-table-row">
-			<td colspan="6"><em><br /><%:Collecting data...%></em></td>
-		</tr>
-	</table>
+	<div class="table cbi-section-table valign-middle" id="wifi_assoc_table">
+		<div class="tr cbi-section-table-titles">
+			<div class="th">&#160;</div>
+			<div class="th"><%:Network%></div>
+			<div class="th"><%:MAC-Address%></div>
+			<div class="th"><%:Host%></div>
+			<div class="th"><%:Signal%> / <%:Noise%></div>
+			<div class="th"><%:RX Rate%> / <%:TX Rate%></div>
+		</div>
+		<div class="tr cbi-section-table-row">
+			<div class="td" colspan="6"><em><br /><%:Collecting data...%></em></div>
+		</div>
+	</div>
 </fieldset>
 <% end %>
 
diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/iptables.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/iptables.htm
index 3f4b83b80b..ced4d5f774 100644
--- a/modules/luci-mod-admin-full/luasrc/view/admin_status/iptables.htm
+++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/iptables.htm
@@ -92,14 +92,14 @@
 
 		<% for _, tbl in ipairs(tables) do chaincnt = 0 %>
 			<h3><%:Table%>: <%=tbl%></h3>
-			<table class="cbi-section-table" style="font-size:90%">
+			<div class="table cbi-section-table" style="font-size:90%">
 				<% for _, chain in ipairs(ipt:chains(tbl)) do
 					rowcnt    = 0
 					chaincnt  = chaincnt + 1
 					chaininfo = ipt:chain(tbl, chain)
 				%>
-					<tr class="cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>">
-						<th class="cbi-section-table-cell" style="text-align:left" colspan="11">
+					<div class="tr cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>">
+						<div class="th cbi-section-table-cell" style="text-align:left" colspan="11">
 							<br /><span id="rule_<%=tbl:lower()%>_<%=chain%>">
 							<%:Chain%> <em><%=chain%></em>
 							(<%- if chaininfo.policy then -%>
@@ -107,47 +107,47 @@
 							<%- else -%>
 								<%:References%>: <%=chaininfo.references-%>
 							<%- end -%>)</span>
-						</th>
-					</tr>
-					<tr class="cbi-section-table-descr">
-						<th class="cbi-section-table-cell"><%:Pkts.%></th>
-						<th class="cbi-section-table-cell"><%:Traffic%></th>
-						<th class="cbi-section-table-cell"><%:Target%></th>
-						<th class="cbi-section-table-cell"><%:Prot.%></th>
-						<th class="cbi-section-table-cell"><%:In%></th>
-						<th class="cbi-section-table-cell"><%:Out%></th>
-						<th class="cbi-section-table-cell"><%:Source%></th>
-						<th class="cbi-section-table-cell"><%:Destination%></th>
-						<th class="cbi-section-table-cell" style="width:30%"><%:Options%></th>
-					</tr>
+						</div>
+					</div>
+					<div class="tr cbi-section-table-descr">
+						<div class="th cbi-section-table-cell"><%:Pkts.%></div>
+						<div class="th cbi-section-table-cell"><%:Traffic%></div>
+						<div class="th cbi-section-table-cell"><%:Target%></div>
+						<div class="th cbi-section-table-cell"><%:Prot.%></div>
+						<div class="th cbi-section-table-cell"><%:In%></div>
+						<div class="th cbi-section-table-cell"><%:Out%></div>
+						<div class="th cbi-section-table-cell"><%:Source%></div>
+						<div class="th cbi-section-table-cell"><%:Destination%></div>
+						<div class="th cbi-section-table-cell" style="width:30%"><%:Options%></div>
+					</div>
 
 					<% for _, rule in ipairs(ipt:find({table=tbl, chain=chain})) do %>
-						<tr class="cbi-section-table-row cbi-rowstyle-<%=rowstyle()%>">
-							<td><%=rule.packets%></td>
-							<td style="white-space: nowrap"><%=wba.byte_format(rule.bytes)%></td>
-							<td><%=rule.target and link_target(tbl, rule.target) or "-"%></td>
-							<td><%=rule.protocol%></td>
-							<td><%=link_iface(rule.inputif)%></td>
-							<td><%=link_iface(rule.outputif)%></td>
-							<td><%=rule.source%></td>
-							<td><%=rule.destination%></td>
-							<td style="width:30%"><small><%=#rule.options > 0 and luci.util.pcdata(table.concat(rule.options, " ")) or "-"%></small></td>
-						</tr>
+						<div class="tr cbi-section-table-row cbi-rowstyle-<%=rowstyle()%>">
+							<div class="td"><%=rule.packets%></div>
+							<div class="td" style="white-space: nowrap"><%=wba.byte_format(rule.bytes)%></div>
+							<div class="td"><%=rule.target and link_target(tbl, rule.target) or "-"%></div>
+							<div class="td"><%=rule.protocol%></div>
+							<div class="td"><%=link_iface(rule.inputif)%></div>
+							<div class="td"><%=link_iface(rule.outputif)%></div>
+							<div class="td"><%=rule.source%></div>
+							<div class="td"><%=rule.destination%></div>
+							<div class="td" style="width:30%"><small><%=#rule.options > 0 and luci.util.pcdata(table.concat(rule.options, " ")) or "-"%></small></div>
+						</div>
 					<% end %>
 
 					<% if rowcnt == 1 then %>
-						<tr class="cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>">
-							<td colspan="9"><em><%:No rules in this chain%></em></td>
-						</tr>
+						<div class="tr cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>">
+							<div class="td" colspan="9"><em><%:No rules in this chain%></em></div>
+						</div>
 					<% end %>
 				<% end %>
 
 				<% if chaincnt == 0 then %>
-					<tr class="cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>">
-						<td colspan="9"><em><%:No chains in this table%></em></td>
-					</tr>
+					<div class="tr cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>">
+						<div class="td" colspan="9"><em><%:No chains in this table%></em></div>
+					</div>
 				<% end %>
-			</table>
+			</div>
 			<br /><br />
 		<% end %>
 	</fieldset>
diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/load.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/load.htm
index 97a2f5ed59..c8ada71569 100644
--- a/modules/luci-mod-admin-full/luasrc/view/admin_status/load.htm
+++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/load.htm
@@ -248,37 +248,37 @@
 <div style="text-align:right"><small id="scale">-</small></div>
 <br />
 
-<table style="width:100%; table-layout:fixed" cellspacing="5">
-	<tr>
-		<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ff0000; white-space:nowrap"><%:1 Minute Load:%></strong></td>
-		<td id="lb_load01_cur">0</td>
-
-		<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
-		<td id="lb_load01_avg">0</td>
-
-		<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
-		<td id="lb_load01_peak">0</td>
-	</tr>
-	<tr>
-		<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ff6600; white-space:nowrap"><%:5 Minute Load:%></strong></td>
-		<td id="lb_load05_cur">0</td>
-
-		<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
-		<td id="lb_load05_avg">0</td>
-
-		<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
-		<td id="lb_load05_peak">0</td>
-	</tr>
-	<tr>
-		<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ffaa00; white-space:nowrap"><%:15 Minute Load:%></strong></td>
-		<td id="lb_load15_cur">0</td>
-
-		<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
-		<td id="lb_load15_avg">0</td>
-
-		<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
-		<td id="lb_load15_peak">0</td>
-	</tr>
-</table>
+<div class="table" style="width:100%; table-layout:fixed" cellspacing="5">
+	<div class="tr">
+		<div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ff0000; white-space:nowrap"><%:1 Minute Load:%></strong></div>
+		<div class="td" id="lb_load01_cur">0</div>
+
+		<div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
+		<div class="td" id="lb_load01_avg">0</div>
+
+		<div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
+		<div class="td" id="lb_load01_peak">0</div>
+	</div>
+	<div class="tr">
+		<div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ff6600; white-space:nowrap"><%:5 Minute Load:%></strong></div>
+		<div class="td" id="lb_load05_cur">0</div>
+
+		<div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
+		<div class="td" id="lb_load05_avg">0</div>
+
+		<div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
+		<div class="td" id="lb_load05_peak">0</div>
+	</div>
+	<div class="tr">
+		<div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ffaa00; white-space:nowrap"><%:15 Minute Load:%></strong></div>
+		<div class="td" id="lb_load15_cur">0</div>
+
+		<div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
+		<div class="td" id="lb_load15_avg">0</div>
+
+		<div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
+		<div class="td" id="lb_load15_peak">0</div>
+	</div>
+</div>
 
 <%+footer%>
diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/routes.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/routes.htm
index f474c71568..af80371353 100644
--- a/modules/luci-mod-admin-full/luasrc/view/admin_status/routes.htm
+++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/routes.htm
@@ -39,28 +39,28 @@
 	<fieldset class="cbi-section">
 		<legend>ARP</legend>
 		<div class="cbi-section-node">
-			<table class="cbi-section-table">
-				<tr class="cbi-section-table-titles">
-					<th class="cbi-section-table-cell"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Address%></th>
-					<th class="cbi-section-table-cell"><%_<abbr title="Media Access Control">MAC</abbr>-Address%></th>
-					<th class="cbi-section-table-cell"><%:Interface%></th>
-				</tr>
+			<div class="table cbi-section-table">
+				<div class="tr cbi-section-table-titles">
+					<div class="th cbi-section-table-cell"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Address%></div>
+					<div class="th cbi-section-table-cell"><%_<abbr title="Media Access Control">MAC</abbr>-Address%></div>
+					<div class="th cbi-section-table-cell"><%:Interface%></div>
+				</div>
 
 				<%
 					for _, v in ipairs(ip.neighbors({ family = 4 })) do
 						if v.mac then
 				%>
-				<tr class="cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>">
-					<td class="cbi-value-field"><%=v.dest%></td>
-					<td class="cbi-value-field"><%=v.mac%></td>
-					<td class="cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></td>
-				</tr>
+				<div class="tr cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>">
+					<div class="td cbi-value-field"><%=v.dest%></div>
+					<div class="td cbi-value-field"><%=v.mac%></div>
+					<div class="td cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div>
+				</div>
 				<%
 							style = not style
 						end
 					end
 				%>
-			</table>
+			</div>
 		</div>
 	</fieldset>
 	<br />
@@ -69,24 +69,24 @@
 		<legend><%_Active <abbr title="Internet Protocol Version 4">IPv4</abbr>-Routes%></legend>
 
 		<div class="cbi-section-node">
-			<table class="cbi-section-table">
-				<tr class="cbi-section-table-titles">
-					<th class="cbi-section-table-cell"><%:Network%></th>
-					<th class="cbi-section-table-cell"><%:Target%></th>
-					<th class="cbi-section-table-cell"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Gateway%></th>
-					<th class="cbi-section-table-cell"><%:Metric%></th>
-					<th class="cbi-section-table-cell"><%:Table%></th>
-				</tr>
+			<div class="table cbi-section-table">
+				<div class="tr cbi-section-table-titles">
+					<div class="th cbi-section-table-cell"><%:Network%></div>
+					<div class="th cbi-section-table-cell"><%:Target%></div>
+					<div class="th cbi-section-table-cell"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Gateway%></div>
+					<div class="th cbi-section-table-cell"><%:Metric%></div>
+					<div class="th cbi-section-table-cell"><%:Table%></div>
+				</div>
 				<% for _, v in ipairs(ip.routes({ family = 4, type = 1 })) do %>
-				<tr class="cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>">
-					<td class="cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or v.dev%></td>
-					<td class="cbi-value-field"><%=v.dest%></td>
-					<td class="cbi-value-field"><%=v.gw%></td>
-					<td class="cbi-value-field"><%=v.metric or 0%></td>
-					<td class="cbi-value-field"><%=rtn[v.table] or v.table%></td>
-				</tr>
+				<div class="tr cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>">
+					<div class="td cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or v.dev%></div>
+					<div class="td cbi-value-field"><%=v.dest%></div>
+					<div class="td cbi-value-field"><%=v.gw%></div>
+					<div class="td cbi-value-field"><%=v.metric or 0%></div>
+					<div class="td cbi-value-field"><%=rtn[v.table] or v.table%></div>
+				</div>
 				<% style = not style end %>
-			</table>
+			</div>
 		</div>
 	</fieldset>
 	<br />
@@ -99,31 +99,31 @@
 		<legend><%_Active <abbr title="Internet Protocol Version 6">IPv6</abbr>-Routes%></legend>
 
 		<div class="cbi-section-node">
-			<table class="cbi-section-table">
-				<tr class="cbi-section-table-titles">
-					<th class="cbi-section-table-cell"><%:Network%></th>
-					<th class="cbi-section-table-cell"><%:Target%></th>
-					<th class="cbi-section-table-cell"><%:Source%></th>
-					<th class="cbi-section-table-cell"><%:Metric%></th>
-					<th class="cbi-section-table-cell"><%:Table%></th>
-				</tr>
+			<div class="table cbi-section-table">
+				<div class="tr cbi-section-table-titles">
+					<div class="th cbi-section-table-cell"><%:Network%></div>
+					<div class="th cbi-section-table-cell"><%:Target%></div>
+					<div class="th cbi-section-table-cell"><%:Source%></div>
+					<div class="th cbi-section-table-cell"><%:Metric%></div>
+					<div class="th cbi-section-table-cell"><%:Table%></div>
+				</div>
 				<%
 					for _, v in ipairs(ip.routes({ family = 6, type = 1 })) do
 						if v.dest and not v.dest:is6linklocal() then
 				%>
-				<tr class="cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>">
-					<td class="cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></td>
-					<td class="cbi-value-field"><%=v.dest%></td>
-					<td class="cbi-value-field"><%=v.from%></td>
-					<td class="cbi-value-field"><%=v.metric or 0%></td>
-					<td class="cbi-value-field"><%=rtn[v.table] or v.table%></td>
-				</tr>
+				<div class="tr cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>">
+					<div class="td cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div>
+					<div class="td cbi-value-field"><%=v.dest%></div>
+					<div class="td cbi-value-field"><%=v.from%></div>
+					<div class="td cbi-value-field"><%=v.metric or 0%></div>
+					<div class="td cbi-value-field"><%=rtn[v.table] or v.table%></div>
+				</div>
 				<%
 							style = not style
 						end
 					end
 				%>
-			</table>
+			</div>
 		</div>
 	</fieldset>
 	<br />
@@ -132,27 +132,27 @@
 		<legend><%:IPv6 Neighbours%></legend>
 
 		<div class="cbi-section-node">
-			<table class="cbi-section-table">
-				<tr class="cbi-section-table-titles">
-					<th class="cbi-section-table-cell"><%:IPv6-Address%></th>
-					<th class="cbi-section-table-cell"><%:MAC-Address%></th>
-					<th class="cbi-section-table-cell"><%:Interface%></th>
-				</tr>
+			<div class="table cbi-section-table">
+				<div class="tr cbi-section-table-titles">
+					<div class="th cbi-section-table-cell"><%:IPv6-Address%></div>
+					<div class="th cbi-section-table-cell"><%:MAC-Address%></div>
+					<div class="th cbi-section-table-cell"><%:Interface%></div>
+				</div>
 				<%
 					for _, v in ipairs(ip.neighbors({ family = 6 })) do
 						if v.dest and not v.dest:is6linklocal() and v.mac then
 				%>
-				<tr class="cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>">
-					<td class="cbi-value-field"><%=v.dest%></td>
-					<td class="cbi-value-field"><%=v.mac%></td>
-					<td class="cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></td>
-				</tr>
+				<div class="tr cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>">
+					<div class="td cbi-value-field"><%=v.dest%></div>
+					<div class="td cbi-value-field"><%=v.mac%></div>
+					<div class="td cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div>
+				</div>
 				<%
 							style = not style
 						end
 					end
 				%>
-			</table>
+			</div>
 		</div>
 	</fieldset>
 	<br />
diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/wireless.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/wireless.htm
index aa658ff0cb..4211b26471 100644
--- a/modules/luci-mod-admin-full/luasrc/view/admin_status/wireless.htm
+++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/wireless.htm
@@ -325,28 +325,28 @@
 <div style="text-align:right"><small id="scale">-</small></div>
 <br />
 
-<table style="width:100%; table-layout:fixed" cellspacing="5">
-	<tr>
-		<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Signal:%></strong></td>
-		<td id="rssi_bw_cur">0 <%:dBm%></td>
+<div class="table" style="width:100%; table-layout:fixed" cellspacing="5">
+	<div class="tr">
+		<div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Signal:%></strong></div>
+		<div class="td" id="rssi_bw_cur">0 <%:dBm%></div>
 
-		<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
-		<td id="rssi_bw_avg">0 <%:dBm%></td>
+		<div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
+		<div class="td" id="rssi_bw_avg">0 <%:dBm%></div>
 
-		<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
-		<td id="rssi_bw_peak">0 <%:dBm%></td>
-	</tr>
-	<tr>
-		<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Noise:%></strong></td>
-		<td id="noise_bw_cur">0 <%:dBm%></td>
+		<div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
+		<div class="td" id="rssi_bw_peak">0 <%:dBm%></div>
+	</div>
+	<div class="tr">
+		<div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Noise:%></strong></div>
+		<div class="td" id="noise_bw_cur">0 <%:dBm%></div>
 
-		<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
-		<td id="noise_bw_avg">0 <%:dBm%></td>
+		<div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
+		<div class="td" id="noise_bw_avg">0 <%:dBm%></div>
 
-		<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
-		<td id="noise_bw_peak">0 <%:dBm%></td>
-	</tr>
-</table>
+		<div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
+		<div class="td" id="noise_bw_peak">0 <%:dBm%></div>
+	</div>
+</div>
 
 <br />
 
@@ -354,17 +354,17 @@
 <div style="text-align:right"><small id="scale2">-</small></div>
 <br />
 
-<table style="width:100%; table-layout:fixed" cellspacing="5">
-	<tr>
-		<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Phy Rate:%></strong></td>
-		<td id="rate_bw_cur">0 MBit/s</td>
+<div class="table" style="width:100%; table-layout:fixed" cellspacing="5">
+	<div class="tr">
+		<div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Phy Rate:%></strong></div>
+		<div class="td" id="rate_bw_cur">0 MBit/s</div>
 
-		<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
-		<td id="rate_bw_avg">0 MBit/s</td>
+		<div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
+		<div class="td" id="rate_bw_avg">0 MBit/s</div>
 
-		<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
-		<td id="rate_bw_peak">0 MBit/s</td>
-	</tr>
-</table>
+		<div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
+		<div class="td" id="rate_bw_peak">0 MBit/s</div>
+	</div>
+</div>
 
 <%+footer%>