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>

8 files changed, 201 insertions, 201 deletions

diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/hna.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/hna.htm
index 5ea7b74e4..2dc4ce173 100644
--- a/applications/luci-app-olsr/luasrc/view/status-olsr/hna.htm
+++ b/applications/luci-app-olsr/luasrc/view/status-olsr/hna.htm
@@ -41,7 +41,7 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 },
 		{
 			var hna = info[idx];
 			var linkgw = ''
-			s += '<tr class="cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-' + hna.proto + '">'
+			s += '<div class="tr cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-' + hna.proto + '">'
 			if (hna.proto == '6') {
 				linkgw = '<a href="http://[' + hna.gateway + ']/cgi-bin-status.html">' + hna.gateway + '</a>'
 			} else {
@@ -61,11 +61,11 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 },
 			}
 
 			s += String.format(
-                                '<td class="cbi-section-table-cell">%s</td>' +
-                                '<td class="cbi-section-table-cell">%s</td>' +
-                                '<td class="cbi-section-table-cell">%s</td>', hna.destination + '/' + hna.genmask, linkgw + hostname, validity
+                                '<div class="td cbi-section-table-cell">%s</div>' +
+                                '<div class="td cbi-section-table-cell">%s</div>' +
+                                '<div class="td cbi-section-table-cell">%s</div>', hna.destination + '/' + hna.genmask, linkgw + hostname, validity
                                 )
-			s += '</tr>'
+			s += '</div>'
 		}
 		hnadiv.innerHTML = s;
 	}
@@ -79,21 +79,21 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 },
 <fieldset class="cbi-section">
 
 	<legend><%:Overview of currently active OLSR host net announcements%></legend>
-	<table class="cbi-section-table">
-		<thead>
-		<tr class="cbi-section-table-titles">
-			<th class="cbi-section-table-cell"><%:Announced network%></th>
-			<th class="cbi-section-table-cell"><%:OLSR gateway%></th>
-			<th class="cbi-section-table-cell"><%:Validity Time%></th>
-		</tr>
+	<div class="table cbi-section-table">
+		<div class="thead">
+		<div class="tr cbi-section-table-titles">
+			<div class="th cbi-section-table-cell"><%:Announced network%></div>
+			<div class="th cbi-section-table-cell"><%:OLSR gateway%></div>
+			<div class="th cbi-section-table-cell"><%:Validity Time%></div>
+		</div>
 
-		</thead>
-		<tbody id="olsrd_hna">
+		</div>
+		<div class="tbody" id="olsrd_hna">
 		<% for k, route in ipairs(hna) do %>
 
-		<tr class="cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=hna[k].proto%>">
-			<td class="cbi-section-table-cell"><%=hna[k].destination%>/<%=hna[k].genmask%> </td>
-			<td class="cbi-section-table-cell">
+		<div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=hna[k].proto%>">
+			<div class="td cbi-section-table-cell"><%=hna[k].destination%>/<%=hna[k].genmask%> </div>
+			<div class="td cbi-section-table-cell">
 				<% if hna[k].proto == '6' then %>
 				<a href="http://[<%=hna[k].gateway%>]/cgi-bin-status.html"><%=hna[k].gateway%></a>
 				<% else %>
@@ -102,20 +102,20 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 },
 				<% if hna[k].hostname then %>
 				 / <a href="http://<%=hna[k].hostname%>/cgi-bin-status.html"><%=hna[k].hostname%></a>
 				<% end %>
-			</td>
+			</div>
 			<% if hna[k].validityTime then
 				validity = hna[k].validityTime .. 's'
 			else
 				validity = '-'
 			end %>
 
-			<td class="cbi-section-table-cell"><%=validity%></td>
-		</tr>
+			<div class="td cbi-section-table-cell"><%=validity%></div>
+		</div>
 
 		<% i = ((i % 2) + 1)
 		end %>
-		</tbody>
-	</table>
+		</div>
+	</div>
 </fieldset>
 
 <%+status-olsr/common_js%>
diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/interfaces.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/interfaces.htm
index 81d0a3dd3..e3ccd0c23 100644
--- a/applications/luci-app-olsr/luasrc/view/status-olsr/interfaces.htm
+++ b/applications/luci-app-olsr/luasrc/view/status-olsr/interfaces.htm
@@ -18,31 +18,31 @@ local i = 1
 <fieldset class="cbi-section">
 	<legend><%:Overview of interfaces where OLSR is running%></legend>
 
-	<table class="cbi-section-table">
-		<tr>
-			<th class="cbi-section-table-cell"><%:Interface%></th>
-			<th class="cbi-section-table-cell"><%:State%></th>
-			<th class="cbi-section-table-cell"><%:MTU%></th>
-			<th class="cbi-section-table-cell"><%:WLAN%></th>
-			<th class="cbi-section-table-cell"><%:Source address%></th>
-			<th class="cbi-section-table-cell"><%:Netmask%></th>
-			<th class="cbi-section-table-cell"><%:Broadcast address%></th>
-		</tr>
+	<div class="table cbi-section-table">
+		<div class="tr">
+			<div class="th cbi-section-table-cell"><%:Interface%></div>
+			<div class="th cbi-section-table-cell"><%:State%></div>
+			<div class="th cbi-section-table-cell"><%:MTU%></div>
+			<div class="th cbi-section-table-cell"><%:WLAN%></div>
+			<div class="th cbi-section-table-cell"><%:Source address%></div>
+			<div class="th cbi-section-table-cell"><%:Netmask%></div>
+			<div class="th cbi-section-table-cell"><%:Broadcast address%></div>
+		</div>
 
 		<% for k, iface in ipairs(iface) do %>
 
-		<tr class="cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=iface.proto%>">
-			<td class="cbi-section-table-cell"><%=iface.name%></td>
-			<td class="cbi-section-table-cell"><%=iface.state%></td>
-			<td class="cbi-section-table-cell"><%=iface.olsrMTU%></td>
-			<td class="cbi-section-table-cell"><%=iface.wireless and luci.i18n.translate('yes') or luci.i18n.translate('no')%></td>
-			<td class="cbi-section-table-cell"><%=iface.ipv4Address or iface.ipv6Address%></td>
-			<td class="cbi-section-table-cell"><%=iface.netmask%></td>
-			<td class="cbi-section-table-cell"><%=iface.broadcast or iface.multicast%></td>
-		</tr>
+		<div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=iface.proto%>">
+			<div class="td cbi-section-table-cell"><%=iface.name%></div>
+			<div class="td cbi-section-table-cell"><%=iface.state%></div>
+			<div class="td cbi-section-table-cell"><%=iface.olsrMTU%></div>
+			<div class="td cbi-section-table-cell"><%=iface.wireless and luci.i18n.translate('yes') or luci.i18n.translate('no')%></div>
+			<div class="td cbi-section-table-cell"><%=iface.ipv4Address or iface.ipv6Address%></div>
+			<div class="td cbi-section-table-cell"><%=iface.netmask%></div>
+			<div class="td cbi-section-table-cell"><%=iface.broadcast or iface.multicast%></div>
+		</div>
 		<% i = ((i % 2) + 1)
 		end %>
-	</table>
+	</div>
 </fieldset>
 <%+status-olsr/common_js%>
 <%+footer%>
diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/mid.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/mid.htm
index f658288fc..8c9f63af0 100644
--- a/applications/luci-app-olsr/luasrc/view/status-olsr/mid.htm
+++ b/applications/luci-app-olsr/luasrc/view/status-olsr/mid.htm
@@ -15,11 +15,11 @@ local i = 1
 <div id="togglebuttons"></div> 
 <fieldset class="cbi-section">
 	<legend><%:Overview of known multiple interface announcements%></legend>
-	<table class="cbi-section-table">
-		<tr class="cbi-section-table-titles">
-			<th class="cbi-section-table-cell"><%:OLSR node%></th>
-			<th class="cbi-section-table-cell" ><%:Secondary OLSR interfaces%></th>
-		</tr>
+	<div class="table cbi-section-table">
+		<div class="tr cbi-section-table-titles">
+			<div class="th cbi-section-table-cell"><%:OLSR node%></div>
+			<div class="th cbi-section-table-cell" ><%:Secondary OLSR interfaces%></div>
+		</div>
 
 		<% for k, mid in ipairs(mids) do 
 			local aliases = ''
@@ -37,14 +37,14 @@ local i = 1
 			end
 		%>
 
-		<tr class="cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=mid.proto%>">
-			<td class="cbi-section-table-cell"><a href="http://<%=host%>/cgi-bin-status.html"><%=mid.ipAddress%></a></td>
-			<td class="cbi-section-table-cell"><%=aliases%></td>
-		</tr>
+		<div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=mid.proto%>">
+			<div class="td cbi-section-table-cell"><a href="http://<%=host%>/cgi-bin-status.html"><%=mid.ipAddress%></a></div>
+			<div class="td cbi-section-table-cell"><%=aliases%></div>
+		</div>
 
 		<% i = ((i % 2) + 1)
 		end %>
-	</table>
+	</div>
 </fieldset>
 <%+status-olsr/common_js%>
 <%+footer%>
diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/neighbors.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/neighbors.htm
index c077c2048..ab0986586 100644
--- a/applications/luci-app-olsr/luasrc/view/status-olsr/neighbors.htm
+++ b/applications/luci-app-olsr/luasrc/view/status-olsr/neighbors.htm
@@ -64,36 +64,36 @@ end
 
 					if (neigh.proto == '6') {
 						s += String.format(
-							'<tr class="cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-%s">' +
-							'<td class="cbi-section-table-titles" style="background-color:%s"><a href="http://[%s]/cgi-bin-status.html">%s</a></td>',
+							'<div class="tr cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-%s">' +
+							'<div class="td cbi-section-table-titles" style="background-color:%s"><a href="http://[%s]/cgi-bin-status.html">%s</a></div>',
 							neigh.proto, neigh.dfgcolor, neigh.rip, neigh.rip
 						);
 					} else {
 						s += String.format(
-							'<tr class="cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-%s">' +
-							'<td class="cbi-section-table-titles" style="background-color:%s"><a href="http://%s/cgi-bin-status.html">%s</a></td>',
+							'<div class="tr cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-%s">' +
+							'<div class="td cbi-section-table-titles" style="background-color:%s"><a href="http://%s/cgi-bin-status.html">%s</a></div>',
 							neigh.proto, neigh.dfgcolor, neigh.rip, neigh.rip
 						);
 					}
 					if (neigh.hn) {
 						s += String.format(
-							'<td class="cbi-section-table-titles" style="background-color:%s"><a href="http://%s/cgi-bin-status.html">%s</a></td>',
+							'<div class="td cbi-section-table-titles" style="background-color:%s"><a href="http://%s/cgi-bin-status.html">%s</a></div>',
 							neigh.dfgcolor, neigh.hn, neigh.hn
 						);
 					} else {
 						s += String.format(
-							'<td class="cbi-section-table-titles" style="background-color:%s">?</td>',
+							'<div class="td cbi-section-table-titles" style="background-color:%s">?</div>',
 							neigh.dfgcolor
 						);
 					}
 					s += String.format(
-						'<td class="cbi-section-table-titles" style="background-color:%s">%s</td>' +
-						'<td class="cbi-section-table-titles" style="background-color:%s">%s</td>' +
-						'<td class="cbi-section-table-titles" style="background-color:%s">%s</td>' +
-						'<td class="cbi-section-table-titles" style="background-color:%s">%s</td>' +
-						'<td class="cbi-section-table-titles" style="background-color:%s">%s</td>' +
-						'<td class="cbi-section-table-titles" style="background-color:%s" title="Signal: %s Noise: %s">%s</td>' +
-						'</tr>',
+						'<div class="td cbi-section-table-titles" style="background-color:%s">%s</div>' +
+						'<div class="td cbi-section-table-titles" style="background-color:%s">%s</div>' +
+						'<div class="td cbi-section-table-titles" style="background-color:%s">%s</div>' +
+						'<div class="td cbi-section-table-titles" style="background-color:%s">%s</div>' +
+						'<div class="td cbi-section-table-titles" style="background-color:%s">%s</div>' +
+						'<div class="td cbi-section-table-titles" style="background-color:%s" title="Signal: %s Noise: %s">%s</div>' +
+						'</div>',
 						neigh.dfgcolor, neigh.ifn, neigh.dfgcolor, neigh.lip, neigh.dfgcolor, neigh.lq, neigh.dfgcolor, neigh.nlq, neigh.color, neigh.cost, neigh.snr_color, neigh.signal, neigh.noise, neigh.snr || '?'
 					);
 				}
@@ -112,21 +112,21 @@ end
 <fieldset class="cbi-section">
 	<legend><%:Overview of currently established OLSR connections%></legend>
 
-	<table class="cbi-section-table">
-		<thead>
-			<tr class="cbi-section-table-titles">
-				<th class="cbi-section-table-cell"><%:Neighbour IP%></th>
-				<th class="cbi-section-table-cell"><%:Hostname%></th>
-				<th class="cbi-section-table-cell"><%:Interface%></th>
-				<th class="cbi-section-table-cell"><%:Local interface IP%></th>
-				<th class="cbi-section-table-cell">LQ</th>
-				<th class="cbi-section-table-cell">NLQ</th>
-				<th class="cbi-section-table-cell">ETX</th>
-				<th class="cbi-section-table-cell">SNR</th>
-			</tr>
-		</thead>
+	<div class="table cbi-section-table">
+		<div class="thead">
+			<div class="tr cbi-section-table-titles">
+				<div class="th cbi-section-table-cell"><%:Neighbour IP%></div>
+				<div class="th cbi-section-table-cell"><%:Hostname%></div>
+				<div class="th cbi-section-table-cell"><%:Interface%></div>
+				<div class="th cbi-section-table-cell"><%:Local interface IP%></div>
+				<div class="th cbi-section-table-cell">LQ</div>
+				<div class="th cbi-section-table-cell">NLQ</div>
+				<div class="th cbi-section-table-cell">ETX</div>
+				<div class="th cbi-section-table-cell">SNR</div>
+			</div>
+		</div>
 	
-		<tbody id="olsr_neigh_table">
+		<div class="tbody" id="olsr_neigh_table">
 		<% 	local i = 1
 			for k, link in ipairs(links) do
 			link.linkCost = tonumber(link.linkCost) or 0
@@ -147,25 +147,25 @@ end
 			end
 		%>
 
-		<tr class="cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=link.proto%>">
+		<div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=link.proto%>">
 			<% if link.proto == "6" then %>
-			<td class="cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><a href="http://[<%=link.remoteIP%>]/cgi-bin-status.html"><%=link.remoteIP%></a></td>
+			<div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><a href="http://[<%=link.remoteIP%>]/cgi-bin-status.html"><%=link.remoteIP%></a></div>
 			<% else %>
-			<td class="cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><a href="http://<%=link.remoteIP%>/cgi-bin-status.html"><%=link.remoteIP%></a></td>
+			<div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><a href="http://<%=link.remoteIP%>/cgi-bin-status.html"><%=link.remoteIP%></a></div>
 			<% end %>
-			<td class="cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><a href="http://<%=link.hostname%>/cgi-bin-status.html"><%=link.hostname%></a></td>
-			<td class="cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=link.interface%></td>
-			<td class="cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=link.localIP%></td>
-			<td class="cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=string.format("%.3f", link.linkQuality)%></td>
-			<td class="cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=string.format("%.3f", link.neighborLinkQuality)%></td>
-			<td class="cbi-section-table-titles" style="background-color:<%=color%>"><%=string.format("%.3f", link.linkCost)%></td>
-			<td class="cbi-section-table-titles" style="background-color:<%=snr_color%>" title="Signal: <%=link.signal%> Noise: <%=link.noise%>"><%=link.snr%></td>
-		</tr>
+			<div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><a href="http://<%=link.hostname%>/cgi-bin-status.html"><%=link.hostname%></a></div>
+			<div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=link.interface%></div>
+			<div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=link.localIP%></div>
+			<div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=string.format("%.3f", link.linkQuality)%></div>
+			<div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=string.format("%.3f", link.neighborLinkQuality)%></div>
+			<div class="td cbi-section-table-titles" style="background-color:<%=color%>"><%=string.format("%.3f", link.linkCost)%></div>
+			<div class="td cbi-section-table-titles" style="background-color:<%=snr_color%>" title="Signal: <%=link.signal%> Noise: <%=link.noise%>"><%=link.snr%></div>
+		</div>
 		<% 
 			i = ((i % 2) + 1)
 		end %>
-		</tbody>
-	</table>
+		</div>
+	</div>
 <br />
 
 <%+status-olsr/legend%>
diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/overview.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/overview.htm
index 61e17b3b2..832a27aed 100644
--- a/applications/luci-app-olsr/luasrc/view/status-olsr/overview.htm
+++ b/applications/luci-app-olsr/luasrc/view/status-olsr/overview.htm
@@ -160,48 +160,48 @@ XHR.poll(10, '<%=REQUEST_URI%>/json', { },
 <fieldset class="cbi-section">
         <legend><%:Network%></legend>
 
-        <table width="100%" cellspacing="10">
-                <tr><td width="33%"><%:Interfaces%></td><td>
+        <div class="table" width="100%" cellspacing="10">
+                <div class="tr"><div class="td" width="33%"><%:Interfaces%></div><div class="td">
 			<a href="<%=REQUEST_URI%>/interfaces">
 				<span id="nr_ifaces">-<span>
 			</a>
-		</td></tr>
-                <tr><td width="33%"><%:Neighbors%></td><td>
+		</div></div>
+                <div class="tr"><div class="td" width="33%"><%:Neighbors%></div><div class="td">
 			<a href="<%=REQUEST_URI%>/neighbors">
 				<span id="nr_neigh">-</span>
 			</a>
-		</td></tr>
-                <tr><td width="33%"><%:Nodes%></td><td>
+		</div></div>
+                <div class="tr"><div class="td" width="33%"><%:Nodes%></div><div class="td">
 			<a href="<%=REQUEST_URI%>/topology">
 				<span id="nr_nodes">-</span>
 			</a>
-		</td></tr>
-                <tr><td width="33%"><%:HNA%></td><td>
+		</div></div>
+                <div class="tr"><div class="td" width="33%"><%:HNA%></div><div class="td">
 			<a href="<%=REQUEST_URI%>/hna">
 				<span id="nr_hna">-</span>
 			</a>
-		</td></tr>
-                <tr><td width="33%"><%:Links total%></td><td>
+		</div></div>
+                <div class="tr"><div class="td" width="33%"><%:Links total%></div><div class="td">
 			<a href="<%=REQUEST_URI%>/topology">
 				<span id="nr_topo">-</span>
 			</a>
-		</td></tr>
-                <tr><td width="33%"><%:Links per node (average)%></td><td>
+		</div></div>
+                <div class="tr"><div class="td" width="33%"><%:Links per node (average)%></div><div class="td">
 			<span id="meshfactor">-</span>
-		</td></tr>
+		</div></div>
 
 
-        </table>
+        </div>
 </fieldset>
 
 
 <fieldset class="cbi-section">
         <legend>OLSR <%:Configuration%></legend>
-        <table width="100%" cellspacing="10">
-                <tr><td width="33%"><%:Version%></td><td>
+        <div class="table" width="100%" cellspacing="10">
+                <div class="tr"><div class="td" width="33%"><%:Version%></div><div class="td">
 			<span id="version">-<span>
-		</td></tr>
-                <tr><td width="33%"><%:Download Config%></td><td>
+		</div></div>
+                <div class="tr"><div class="td" width="33%"><%:Download Config%></div><div class="td">
 			<% if has_ipv4_conf then %>
 			    <a href="<%=REQUEST_URI%>?openwrt_v4">OpenWrt (IPv4)</a>,
 			<% end %>
@@ -214,8 +214,8 @@ XHR.poll(10, '<%=REQUEST_URI%>/json', { },
 			<% if has_ipv6_conf then %>
 			    <a href="<%=REQUEST_URI%>?conf_v6">OLSRD (IPv6)</a>
 			<% end %>
-		</td></tr>
-	</table>
+		</div></div>
+	</div>
 </fieldset>
 
 <%+footer%>
diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/routes.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/routes.htm
index 8e46daa02..c75b94fce 100644
--- a/applications/luci-app-olsr/luasrc/view/status-olsr/routes.htm
+++ b/applications/luci-app-olsr/luasrc/view/status-olsr/routes.htm
@@ -50,9 +50,9 @@ XHR.poll(20, '<%=REQUEST_URI%>', { status: 1 },
 					var route = info[idx];
 
 					s += String.format(
-						'<tr class="cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-%s">' +
-							'<td class="cbi-section-table-cell">%s/%s</td>' +
-							'<td class="cbi-section-table-cell">' +
+						'<div class="tr cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-%s">' +
+							'<div class="td cbi-section-table-cell">%s/%s</div>' +
+							'<div class="td cbi-section-table-cell">' +
 			                	                '<a href="http://%s/cgi-bin-status.html">%s</a>',
 								route.proto, route.dest, route.genmask, route.gw, route.gw
 						)
@@ -72,11 +72,11 @@ XHR.poll(20, '<%=REQUEST_URI%>', { status: 1 },
 
 					}
 					s += String.format(
-				                        '</td>' +
-							'<td class="cbi-section-table-cell">%s</td>' +
-							'<td class="cbi-section-table-cell">%s</td>' +
-							'<td class="cbi-section-table-cell" style="background-color:%s">%s</td>' +
-						'</tr>',
+				                        '</div>' +
+							'<div class="td cbi-section-table-cell">%s</div>' +
+							'<div class="td cbi-section-table-cell">%s</div>' +
+							'<div class="td cbi-section-table-cell" style="background-color:%s">%s</div>' +
+						'</div>',
 						route.interface, route.metric, route.color, route.etx || '?'
 					);
 				}
@@ -96,27 +96,27 @@ XHR.poll(20, '<%=REQUEST_URI%>', { status: 1 },
 <fieldset class="cbi-section">
 <legend><%:Overview of currently known routes to other OLSR nodes%></legend>
 
-<table class="cbi-section-table">
-	<thead>
-		<tr class="cbi-section-table-titles">
-			<th class="cbi-section-table-cell"><%:Announced network%></th>
-			<th class="cbi-section-table-cell"><%:OLSR gateway%></th>
-			<th class="cbi-section-table-cell"><%:Interface%></th>
-			<th class="cbi-section-table-cell"><%:Metric%></th>
-			<th class="cbi-section-table-cell">ETX</th>
-		</tr>
-	</thead>
+<div class="table cbi-section-table">
+	<div class="thead">
+		<div class="tr cbi-section-table-titles">
+			<div class="th cbi-section-table-cell"><%:Announced network%></div>
+			<div class="th cbi-section-table-cell"><%:OLSR gateway%></div>
+			<div class="th cbi-section-table-cell"><%:Interface%></div>
+			<div class="th cbi-section-table-cell"><%:Metric%></div>
+			<div class="th cbi-section-table-cell">ETX</div>
+		</div>
+	</div>
 
-	<tbody id="olsrd_routes">
+	<div class="tbody" id="olsrd_routes">
 
 	<% for k, route in ipairs(routes) do
 		ETX = tonumber(route.rtpMetricCost)/1024 or '0'
 		color = olsrtools.etx_color(ETX)
 	%>
 
-		<tr class="cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=route.proto%>">
-			<td class="cbi-section-table-cell"><%=route.destination%>/<%=route.genmask%></td>
-			<td class="cbi-section-table-cell">
+		<div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=route.proto%>">
+			<div class="td cbi-section-table-cell"><%=route.destination%>/<%=route.genmask%></div>
+			<div class="td cbi-section-table-cell">
 				<% if route.proto == '6' then %>
 				<a href="http://[<%=route.gateway%>]/cgi-bin-status.html"><%=route.gateway%></a>
 				<% else  %>
@@ -125,16 +125,16 @@ XHR.poll(20, '<%=REQUEST_URI%>', { status: 1 },
 				<% if route.hostname then %>
 					/ <a href="http://<%=route.Hostname%>/cgi-bin-status.html"><%=route.hostname%></a>  
 				<% end %>
-			</td>
-			<td class="cbi-section-table-cell"><%=route.networkInterface%></td>
-			<td class="cbi-section-table-cell"><%=route.metric%></td>
-			<td class="cbi-section-table-cell" style="background-color:<%=color%>"><%=string.format("%.3f", ETX)%></td>
-		</tr>
+			</div>
+			<div class="td cbi-section-table-cell"><%=route.networkInterface%></div>
+			<div class="td cbi-section-table-cell"><%=route.metric%></div>
+			<div class="td cbi-section-table-cell" style="background-color:<%=color%>"><%=string.format("%.3f", ETX)%></div>
+		</div>
 	<% 
 		i = ((i % 2) + 1)
 	end %>
-	</tbody>
-</table>
+	</div>
+</div>
 
 <%+status-olsr/legend%>
 </fieldset>
diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/smartgw.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/smartgw.htm
index 6aa7a7546..7ca66816a 100644
--- a/applications/luci-app-olsr/luasrc/view/status-olsr/smartgw.htm
+++ b/applications/luci-app-olsr/luasrc/view/status-olsr/smartgw.htm
@@ -56,7 +56,7 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 },
 		for (var idx = 0; idx < info.length; idx++)
 		{
 			var smartgw = info[idx];
-			s += '<tr class="cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-' + smartgw.proto + '">'
+			s += '<div class="tr cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-' + smartgw.proto + '">'
 			if (smartgw.proto == '6') {
 				linkgw = '<a href="http://[' + smartgw.ipAddress + ']/cgi-bin-status.html">' + smartgw.ipAddress + '</a>'
 			} else {
@@ -64,18 +64,18 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 },
 			}
 
 			s += String.format(
-                                '<td class="cbi-section-table-cell">%s</td>' +
-                                '<td class="cbi-section-table-cell">%s</td>' +
-                                '<td class="cbi-section-table-cell">%s</td>' +
-                                '<td class="cbi-section-table-cell">%s</td>' +
-                                '<td class="cbi-section-table-cell">%s</td>' +
-                                '<td class="cbi-section-table-cell">%s</td>' +
-                                '<td class="cbi-section-table-cell">%s</td>' +
-                                '<td class="cbi-section-table-cell">%s</td>' +
-                                '<td class="cbi-section-table-cell">%s</td>',
+                                '<div class="td cbi-section-table-cell">%s</div>' +
+                                '<div class="td cbi-section-table-cell">%s</div>' +
+                                '<div class="td cbi-section-table-cell">%s</div>' +
+                                '<div class="td cbi-section-table-cell">%s</div>' +
+                                '<div class="td cbi-section-table-cell">%s</div>' +
+                                '<div class="td cbi-section-table-cell">%s</div>' +
+                                '<div class="td cbi-section-table-cell">%s</div>' +
+                                '<div class="td cbi-section-table-cell">%s</div>' +
+                                '<div class="td cbi-section-table-cell">%s</div>',
 				linkgw, smartgw.status, smartgw.tcPathCost, smartgw.hopCount, smartgw.uplinkSpeed, smartgw.downlinkSpeed, smartgw.v4, smartgw.v6, smartgw.externalPrefix
                                 )
-			s += '</tr>'
+			s += '</div>'
 		}
 		smartgwdiv.innerHTML = s;
 	}
@@ -94,23 +94,23 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 },
 
 	<fieldset class="cbi-section">
 		<legend><%:Overview of smart gateways in this network%></legend>
-		<table class="cbi-section-table">
-			<thead>
-			<tr class="cbi-section-table-titles">
-				<th class="cbi-section-table-cell"><%:Gateway%></th>
-				<th class="cbi-section-table-cell"><%:Status%></th>
-				<th class="cbi-section-table-cell"><%:ETX%></th>
-				<th class="cbi-section-table-cell"><%:Hops%></th>
-				<th class="cbi-section-table-cell"><%:Uplink%></th>
-				<th class="cbi-section-table-cell"><%:Downlink%></th>
-				<th class="cbi-section-table-cell"><%:IPv4%></th>
-				<th class="cbi-section-table-cell"><%:IPv6%></th>
-				<th class="cbi-section-table-cell"><%:Prefix%></th>
-
-			</tr>
-			</thead>
-
-			<tbody id="olsrd_smartgw">
+		<div class="table cbi-section-table">
+			<div class="thead">
+			<div class="tr cbi-section-table-titles">
+				<div class="th cbi-section-table-cell"><%:Gateway%></div>
+				<div class="th cbi-section-table-cell"><%:Status%></div>
+				<div class="th cbi-section-table-cell"><%:ETX%></div>
+				<div class="th cbi-section-table-cell"><%:Hops%></div>
+				<div class="th cbi-section-table-cell"><%:Uplink%></div>
+				<div class="th cbi-section-table-cell"><%:Downlink%></div>
+				<div class="th cbi-section-table-cell"><%:IPv4%></div>
+				<div class="th cbi-section-table-cell"><%:IPv6%></div>
+				<div class="th cbi-section-table-cell"><%:Prefix%></div>
+
+			</div>
+			</div>
+
+			<div class="tbody" id="olsrd_smartgw">
 			<% for k, gw in ipairs(gws) do 
 
 			gw.tcPathCost = tonumber(gw.tcPathCost)/1024 or 0
@@ -119,27 +119,27 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 },
                		end
 			%>
 
-			<tr class="cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=proto%>">
+			<div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=proto%>">
 				<% if gw.proto == '6' then %>
-					<td class="cbi-section-table-cell"><a href="http://[<%=gw.ipAddress%>]/cgi-bin-status.html"><%=gw.ipAddress%></a></td>
+					<div class="td cbi-section-table-cell"><a href="http://[<%=gw.ipAddress%>]/cgi-bin-status.html"><%=gw.ipAddress%></a></div>
 				<% else %>
-					<td class="cbi-section-table-cell"><a href="http://<%=gw.ipAddress%>/cgi-bin-status.html"><%=gw.ipAddress%></a></td>
+					<div class="td cbi-section-table-cell"><a href="http://<%=gw.ipAddress%>/cgi-bin-status.html"><%=gw.ipAddress%></a></div>
 				<% end %>
 
-				<td class="cbi-section-table-cell"><%=gw.ipv4Status or gw.ipv6Status or '-' %></td>
-				<td class="cbi-section-table-cell"><%=string.format("%.3f", gw.tcPathCost)%></td>
-				<td class="cbi-section-table-cell"><%=gw.hopCount%></td>
-				<td class="cbi-section-table-cell"><%=gw.uplinkSpeed%></td>
-				<td class="cbi-section-table-cell"><%=gw.downlinkSpeed%></td>
-				<td class="cbi-section-table-cell"><%=gw.ipv4 and luci.i18n.translate('yes') or luci.i18n.translate('no')%></td>
-				<td class="cbi-section-table-cell"><%=gw.ipv6 and luci.i18n.translate('yes') or luci.i18n.translate('no')%></td>
-				<td class="cbi-section-table-cell"><%=gw.externalPrefix%></td>
-			</tr>
+				<div class="td cbi-section-table-cell"><%=gw.ipv4Status or gw.ipv6Status or '-' %></div>
+				<div class="td cbi-section-table-cell"><%=string.format("%.3f", gw.tcPathCost)%></div>
+				<div class="td cbi-section-table-cell"><%=gw.hopCount%></div>
+				<div class="td cbi-section-table-cell"><%=gw.uplinkSpeed%></div>
+				<div class="td cbi-section-table-cell"><%=gw.downlinkSpeed%></div>
+				<div class="td cbi-section-table-cell"><%=gw.ipv4 and luci.i18n.translate('yes') or luci.i18n.translate('no')%></div>
+				<div class="td cbi-section-table-cell"><%=gw.ipv6 and luci.i18n.translate('yes') or luci.i18n.translate('no')%></div>
+				<div class="td cbi-section-table-cell"><%=gw.externalPrefix%></div>
+			</div>
 
 			<% i = ((i % 2) + 1)
 			end %>
-			</tbody>
-		</table>
+			</div>
+		</div>
 	</fieldset>
 
 <% else %>
diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/topology.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/topology.htm
index b3abeaecb..02fdfddac 100644
--- a/applications/luci-app-olsr/luasrc/view/status-olsr/topology.htm
+++ b/applications/luci-app-olsr/luasrc/view/status-olsr/topology.htm
@@ -17,14 +17,14 @@ local olsrtools = require "luci.tools.olsr"
 
 <fieldset class="cbi-section">
 	<legend><%:Overview of currently known OLSR nodes%></legend>
-	<table class="cbi-section-table">
-		<tr class="cbi-section-table-titles">
-			<th class="cbi-section-table-cell"><%:OLSR node%></th>
-			<th class="cbi-section-table-cell"><%:Last hop%></th>
-			<th class="cbi-section-table-cell"><%:LQ%></th>
-			<th class="cbi-section-table-cell"><%:NLQ%></th>
-			<th class="cbi-section-table-cell"><%:ETX%></th>
-		</tr>
+	<div class="table cbi-section-table">
+		<div class="tr cbi-section-table-titles">
+			<div class="th cbi-section-table-cell"><%:OLSR node%></div>
+			<div class="th cbi-section-table-cell"><%:Last hop%></div>
+			<div class="th cbi-section-table-cell"><%:LQ%></div>
+			<div class="th cbi-section-table-cell"><%:NLQ%></div>
+			<div class="th cbi-section-table-cell"><%:ETX%></div>
+		</div>
 
 		<% for k, route in ipairs(routes) do 
 			local cost = string.format("%.3f", tonumber(route.tcEdgeCost/1024) or 0)
@@ -33,28 +33,28 @@ local olsrtools = require "luci.tools.olsr"
 			local nlq = string.format("%.3f", tonumber(route.neighborLinkQuality) or 0)
 		%>
 
-		<tr class="cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=route.proto%>">
+		<div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=route.proto%>">
 
 			<% if route.proto == "6" then %>
 
-			<td class="cbi-section-table-cell"><a href="http://[<%=route.destinationIP%>]/cgi-bin-status.html"><%=route.destinationIP%></a></td>
-			<td class="cbi-section-table-cell"><a href="http://[<%=route.lastHopIP%>]/cgi-bin-status.html"><%=route.lastHopIP%></a></td>
+			<div class="td cbi-section-table-cell"><a href="http://[<%=route.destinationIP%>]/cgi-bin-status.html"><%=route.destinationIP%></a></div>
+			<div class="td cbi-section-table-cell"><a href="http://[<%=route.lastHopIP%>]/cgi-bin-status.html"><%=route.lastHopIP%></a></div>
 
 			<% else %>
 
-			<td class="cbi-section-table-cell"><a href="http://<%=route.destinationIP%>/cgi-bin-status.html"><%=route.destinationIP%></a></td>
-			<td class="cbi-section-table-cell"><a href="http://<%=route.lastHopIP%>/cgi-bin-status.html"><%=route.lastHopIP%></a></td>
+			<div class="td cbi-section-table-cell"><a href="http://<%=route.destinationIP%>/cgi-bin-status.html"><%=route.destinationIP%></a></div>
+			<div class="td cbi-section-table-cell"><a href="http://<%=route.lastHopIP%>/cgi-bin-status.html"><%=route.lastHopIP%></a></div>
 
 			<%end%>
 
-			<td class="cbi-section-table-cell"><%=lq%></td>
-			<td class="cbi-section-table-cell"><%=nlq%></td>
-			<td class="cbi-section-table-cell" style="background-color:<%=color%>"><%=cost%></td>
-		</tr>
+			<div class="td cbi-section-table-cell"><%=lq%></div>
+			<div class="td cbi-section-table-cell"><%=nlq%></div>
+			<div class="td cbi-section-table-cell" style="background-color:<%=color%>"><%=cost%></div>
+		</div>
 
 		<%	i = ((i % 2) + 1)
 		end %>
-	</table>
+	</div>
 <%+status-olsr/legend%>
 </fieldset>