luci-mod-admin-full: cleanup markup

Globally cleanup template markup to support responsive design changes in
OpenWrt theme.

Rework handling of dynamic status tables, consolidate hand-written markup,
fix small render bugs in various places and annotate tables where needed.

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

3 files changed, 213 insertions, 215 deletions

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 c5952064aa..89ed973c1c 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
@@ -130,7 +130,7 @@
 		var pc = Math.floor((100 / mn) * vn);
 
 		return String.format(
-			'<div style="width:200px; position:relative; border:1px solid #999999">' +
+			'<div style="width:100%%; max-width:200px; position:relative; border:1px solid #999999">' +
 				'<div style="background-color:#CCCCCC; width:%d%%; height:15px">' +
 					'<div style="position:absolute; left:0; top:0; text-align:center; width:100%%; color:#000000">' +
 						'<small>%s / %s (%d%%)</small>' +
@@ -205,7 +205,7 @@
 		return E('div', { class: 'ifacebox' }, [
 			E('div', { class: 'ifacebox-head center ' + (active ? 'active' : '') },
 				E('strong', title)),
-			E('div', { class: 'ifacebox-body' }, childs)
+			E('div', { class: 'ifacebox-body left' }, childs)
 		]);
 	}
 
@@ -334,9 +334,7 @@
 			var ls = document.getElementById('lease_status_table');
 			if (ls)
 			{
-				/* clear all rows */
-				while (ls.firstElementChild !== ls.lastElementChild)
-					ls.removeChild(ls.lastElementChild);
+				var rows = [];
 
 				for (var i = 0; i < info.leases.length; i++)
 				{
@@ -349,26 +347,23 @@
 					else
 						timestr = String.format('%t', info.leases[i].expires);
 
-					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)
-					]));
+					rows.push([
+						info.leases[i].hostname ? info.leases[i].hostname : '?',
+						info.leases[i].ipaddr,
+						info.leases[i].macaddr,
+						timestr
+					]);
 				}
 
-				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>'));
+				cbi_update_table(ls, rows, '<em><%:There are no active leases.%></em>');
 			}
 
 			var ls6 = document.getElementById('lease6_status_table');
 			if (ls6 && info.leases6)
 			{
-				ls6.parentNode.style.display = 'block';
+				ls6.parentNode.parentNode.style.display = 'block';
 
-				/* clear all rows */
-				while (ls6.firstElementChild !== ls6.lastElementChild)
-					ls6.removeChild(ls6.lastElementChild);
+				var rows = [];
 
 				for (var i = 0; i < info.leases6.length; i++)
 				{
@@ -394,16 +389,15 @@
 							hint = host.name;
 					}
 
-					ls6.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [
-						E('<div class="td nowrap">', hint ? '<div>%h (%h)</div>'.format(name || '?', hint) : (name || '?')),
-						E('<div class="td nowrap">', info.leases6[i].ip6addr),
-						E('<div class="td nowrap">', info.leases6[i].duid),
-						E('<div class="td nowrap">', timestr)
-					]));
+					rows.push([
+						hint ? '%h (%h)'.format(name || '?', hint) : (name || '?'),
+						info.leases6[i].ip6addr,
+						info.leases6[i].duid,
+						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>'));
+				cbi_update_table(ls6, rows, '<em><%:There are no active leases.%></em>');
 			}
 			<% end %>
 
@@ -482,9 +476,7 @@
 			var ac = document.getElementById('wifi_assoc_table');
 			if (ac)
 			{
-				/* clear all rows */
-				while (ac.firstElementChild !== ac.lastElementChild)
-					ac.removeChild(ac.lastElementChild);
+				var rows = [];
 
 				assoclist.sort(function(a, b) {
 					return (a.name == b.name)
@@ -512,27 +504,30 @@
 					    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 nowrap">',
-							hint ? '<div>%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 nowrap">', [
-							E('<span style="white-space:nowrap">', wifirate(assoclist[i], true)),
-							E('<br />'),
-							E('<span style="white-space:nowrap">', wifirate(assoclist[i], false))
+					rows.push([
+						'<span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> <a href="%s">%h</a><small>&#160;(%h)</small></span>'.format(
+							assoclist[i].radio,
+							assoclist[i].link,
+							assoclist[i].name,
+							assoclist[i].ifname),
+						assoclist[i].bssid,
+						hint ? '%h (%h)'.format(name || '?', hint) : (name || '?'),
+						'<span class="ifacebadge" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%> / <%:SNR%>: %d"><img src="%s" /> %d / %d <%:dBm%></span>'.format(
+							assoclist[i].signal,
+							assoclist[i].noise,
+							assoclist[i].signal - assoclist[i].noise,
+							icon,
+							assoclist[i].signal,
+							assoclist[i].noise),
+						E('span', {}, [
+							E('span', wifirate(assoclist[i], true)),
+							E('br'),
+							E('span', wifirate(assoclist[i], false))
 						])
-					]));
+					]);
 				}
 
-				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>'));
+				cbi_update_table(ac, rows, '<em><%:No information available%></em>');
 			}
 			<% end %>
 
@@ -591,7 +586,7 @@
 
 <h2 name="content"><%:Status%></h2>
 
-<fieldset class="cbi-section">
+<div class="cbi-section">
 	<legend><%:System%></legend>
 
 	<div class="table" width="100%">
@@ -607,9 +602,9 @@
 		<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>
+</div>
 
-<fieldset class="cbi-section">
+<div class="cbi-section">
 	<legend><%:Memory%></legend>
 
 	<div class="table" width="100%">
@@ -617,20 +612,20 @@
 		<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>
+</div>
 
 <% if swapinfo.total > 0 then %>
-<fieldset class="cbi-section">
+<div class="cbi-section">
 	<legend><%:Swap%></legend>
 
 	<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>
+</div>
 <% end %>
 
-<fieldset class="cbi-section">
+<div class="cbi-section">
 	<legend><%:Network%></legend>
 
 	<div id="upstream_status_table" class="network-status-table">
@@ -640,87 +635,95 @@
 	<div class="table" width="100%">
 		<div class="tr"><div class="td left" width="33%"><%:Active Connections%></div><div class="td left" id="conns">-</div></div>
 	</div>
-</fieldset>
+</div>
 
 <% if has_dhcp then %>
-<fieldset class="cbi-section">
+<div class="cbi-section">
 	<legend><%:DHCP Leases%></legend>
 
-	<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 class="cbi-section-node">
+		<div class="table" id="lease_status_table">
+			<div class="tr 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>
 	</div>
-</fieldset>
+</div>
 
-<fieldset class="cbi-section" style="display:none">
+<div class="cbi-section" style="display:none">
 	<legend><%:DHCPv6 Leases%></legend>
 
-	<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 class="cbi-section-node">
+		<div class="table" id="lease6_status_table">
+			<div class="tr 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>
 	</div>
-</fieldset>
+</div>
 <% end %>
 
 <% if has_dsl then %>
-<fieldset class="cbi-section">
+<div class="cbi-section">
 	<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 class="cbi-section-node">
+		<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>
 	</div>
-</fieldset>
+</div>
 <% end %>
 
 <% if has_wifi then %>
-<fieldset class="cbi-section">
+<div class="cbi-section">
 	<legend><%:Wireless%></legend>
 
 	<div id="wifi_status_table" class="network-status-table">
 		<em><%:Collecting data...%></em>
 	</div>
-</fieldset>
+</div>
 
-<fieldset class="cbi-section">
+<div class="cbi-section">
 	<legend><%:Associated Stations%></legend>
 
-	<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 class="cbi-section-node">
+		<div class="table" id="wifi_assoc_table">
+			<div class="tr table-titles">
+				<div class="th nowrap"><%:Network%></div>
+				<div class="th hide-xs"><%:MAC-Address%></div>
+				<div class="th nowrap"><%:Host%></div>
+				<div class="th nowrap"><%:Signal%> / <%:Noise%></div>
+				<div class="th nowrap"><%:RX Rate%> / <%:TX Rate%></div>
+			</div>
+			<div class="tr">
+				<div class="td" colspan="6"><em><br /><%:Collecting data...%></em></div>
+			</div>
 		</div>
 	</div>
-</fieldset>
+</div>
 <% 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 ced4d5f774..5d544ca60b 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
@@ -62,6 +62,7 @@
 
 <%+header%>
 
+<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
 <style type="text/css">
 	span:target {
 		color: blue;
@@ -70,7 +71,6 @@
 </style>
 
 <h2 name="content"><%:Firewall Status%></h2>
-<br />
 
 <% if has_ip6tables then %>
 <ul class="cbi-tabmenu">
@@ -88,69 +88,69 @@
 		<input type="submit" class="cbi-button" name="restart" value="<%:Restart Firewall%>" />
 	</form>
 
-	<fieldset class="cbi-section">
+	<div class="cbi-section">
 
 		<% for _, tbl in ipairs(tables) do chaincnt = 0 %>
 			<h3><%:Table%>: <%=tbl%></h3>
-			<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)
-				%>
-					<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 -%>
-								<%:Policy%>: <em><%=chaininfo.policy%></em>, <%:Packets%>: <%=chaininfo.packets%>, <%:Traffic%>: <%=wba.byte_format(chaininfo.bytes)-%>
-							<%- else -%>
-								<%:References%>: <%=chaininfo.references-%>
-							<%- end -%>)</span>
-						</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 %>
-						<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>
+			<% for _, chain in ipairs(ipt:chains(tbl)) do
+				rowcnt    = 0
+				chaincnt  = chaincnt + 1
+				chaininfo = ipt:chain(tbl, chain)
+			%>
+				<h4  id="rule_<%=tbl:lower()%>_<%=chain%>">
+					<%:Chain%> <em><%=chain%></em>
+					(<%- if chaininfo.policy then -%>
+						<%:Policy%>: <em><%=chaininfo.policy%></em>, <%:Packets%>: <%=chaininfo.packets%>, <%:Traffic%>: <%=wba.byte_format(chaininfo.bytes)-%>
+					<%- else -%>
+						<%:References%>: <%=chaininfo.references-%>
+					<%- end -%>)
+				</h4>
+
+				<div class="cbi-section-node">
+					<div class="table" style="font-size:90%">
+						<div class="tr table-titles cbi-rowstyle-<%=rowstyle()%>">
+							<div class="th hide-xs"><%:Pkts.%></div>
+							<div class="th nowrap"><%:Traffic%></div>
+							<div class="th col-5"><%:Target%></div>
+							<div class="th"><%:Prot.%></div>
+							<div class="th"><%:In%></div>
+							<div class="th"><%:Out%></div>
+							<div class="th"><%:Source%></div>
+							<div class="th"><%:Destination%></div>
+							<div class="th col-9 hide-xs"><%:Options%></div>
 						</div>
-					<% end %>
 
-					<% if rowcnt == 1 then %>
-						<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 %>
-					<div class="tr cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>">
-						<div class="td" colspan="9"><em><%:No chains in this table%></em></div>
+						<% for _, rule in ipairs(ipt:find({table=tbl, chain=chain})) do %>
+							<div class="tr cbi-rowstyle-<%=rowstyle()%>">
+								<div class="td"><%=rule.packets%></div>
+								<div class="td nowrap"><%=wba.byte_format(rule.bytes)%></div>
+								<div class="td col-5"><%=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 col-9 hide-xs"><%=#rule.options > 0 and luci.util.pcdata(table.concat(rule.options, " ")) or "-"%></div>
+							</div>
+						<% end %>
+
+						<% if rowcnt == 1 then %>
+							<div class="tr cbi-rowstyle-<%=rowstyle()%>">
+								<div class="td" colspan="9"><em><%:No rules in this chain%></em></div>
+							</div>
+						<% end %>
 					</div>
-				<% end %>
-			</div>
+				</div>
+			<% end %>
+
+			<% if chaincnt == 0 then %>
+				<em><%:No chains in this table%></em>
+			<% end %>
+
 			<br /><br />
 		<% end %>
-	</fieldset>
+	</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 af80371353..9ed37939fe 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
@@ -32,28 +32,30 @@
 
 <%+header%>
 
+<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
+
 <div class="cbi-map" id="cbi-network">
 	<h2 name="content"><%:Routes%></h2>
 	<div class="cbi-map-descr"><%:The following rules are currently active on this system.%></div>
 
-	<fieldset class="cbi-section">
+	<div class="cbi-section">
 		<legend>ARP</legend>
 		<div class="cbi-section-node">
-			<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 class="table">
+				<div class="tr table-titles">
+					<div class="th"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Address%></div>
+					<div class="th"><%_<abbr title="Media Access Control">MAC</abbr>-Address%></div>
+					<div class="th"><%:Interface%></div>
 				</div>
 
 				<%
 					for _, v in ipairs(ip.neighbors({ family = 4 })) do
 						if v.mac then
 				%>
-				<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 class="tr cbi-rowstyle-<%=(style and 1 or 2)%>">
+					<div class="td"><%=v.dest%></div>
+					<div class="td"><%=v.mac%></div>
+					<div class="td"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div>
 				</div>
 				<%
 							style = not style
@@ -62,61 +64,57 @@
 				%>
 			</div>
 		</div>
-	</fieldset>
-	<br />
+	</div>
 
-	<fieldset class="cbi-section">
+	<div class="cbi-section">
 		<legend><%_Active <abbr title="Internet Protocol Version 4">IPv4</abbr>-Routes%></legend>
-
 		<div class="cbi-section-node">
-			<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 class="table">
+				<div class="tr table-titles">
+					<div class="th"><%:Network%></div>
+					<div class="th"><%:Target%></div>
+					<div class="th"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Gateway%></div>
+					<div class="th"><%:Metric%></div>
+					<div class="th"><%:Table%></div>
 				</div>
 				<% for _, v in ipairs(ip.routes({ family = 4, type = 1 })) do %>
-				<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 class="tr cbi-rowstyle-<%=(style and 1 or 2)%>">
+					<div class="td"><%=luci.tools.webadmin.iface_get_network(v.dev) or v.dev%></div>
+					<div class="td"><%=v.dest%></div>
+					<div class="td"><%=v.gw or "-"%></div>
+					<div class="td"><%=v.metric or 0%></div>
+					<div class="td"><%=rtn[v.table] or v.table%></div>
 				</div>
 				<% style = not style end %>
 			</div>
 		</div>
-	</fieldset>
-	<br />
+	</div>
 
 	<%
 		if nixio.fs.access("/proc/net/ipv6_route") then
 			style = true
 	%>
-	<fieldset class="cbi-section">
+	<div class="cbi-section">
 		<legend><%_Active <abbr title="Internet Protocol Version 6">IPv6</abbr>-Routes%></legend>
-
 		<div class="cbi-section-node">
-			<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 class="table">
+				<div class="tr table-titles">
+					<div class="th"><%:Network%></div>
+					<div class="th"><%:Target%></div>
+					<div class="th"><%:Source%></div>
+					<div class="th"><%:Metric%></div>
+					<div class="th"><%:Table%></div>
 				</div>
 				<%
 					for _, v in ipairs(ip.routes({ family = 6, type = 1 })) do
 						if v.dest and not v.dest:is6linklocal() then
 				%>
-				<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 class="tr cbi-rowstyle-<%=(style and 1 or 2)%>">
+					<div class="td"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div>
+					<div class="td"><%=v.dest%></div>
+					<div class="td"><%=v.from%></div>
+					<div class="td"><%=v.metric or 0%></div>
+					<div class="td"><%=rtn[v.table] or v.table%></div>
 				</div>
 				<%
 							style = not style
@@ -125,27 +123,25 @@
 				%>
 			</div>
 		</div>
-	</fieldset>
-	<br />
+	</div>
 
-	<fieldset class="cbi-section">
+	<div class="cbi-section">
 		<legend><%:IPv6 Neighbours%></legend>
-
 		<div class="cbi-section-node">
-			<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 class="table">
+				<div class="tr table-titles">
+					<div class="th"><%:IPv6-Address%></div>
+					<div class="th"><%:MAC-Address%></div>
+					<div class="th"><%:Interface%></div>
 				</div>
 				<%
 					for _, v in ipairs(ip.neighbors({ family = 6 })) do
 						if v.dest and not v.dest:is6linklocal() and v.mac then
 				%>
-				<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 class="tr cbi-rowstyle-<%=(style and 1 or 2)%>">
+					<div class="td"><%=v.dest%></div>
+					<div class="td"><%=v.mac%></div>
+					<div class="td"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div>
 				</div>
 				<%
 							style = not style
@@ -154,8 +150,7 @@
 				%>
 			</div>
 		</div>
-	</fieldset>
-	<br />
+	</div>
 	<% end %>
 </div>