From 8e6171c07fad6f1237af210abc623ed77aaced30 Mon Sep 17 00:00:00 2001
From: JSZMonkey <22406031+JSZMonkey@users.noreply.github.com>
Date: Mon, 29 Nov 2021 09:26:54 +0800
Subject: [PATCH] fix style like this see pic

like this https://github.com/JSZMonkey/OpenWrt-Add/blob/master/QQ%E5%9B%BE%E7%89%8720211129084910.png
---
 .../luasrc/view/admin_network/user_status.htm | 57 +++++--------------
 1 file changed, 15 insertions(+), 42 deletions(-)

diff --git a/luci-app-oaf/luasrc/view/admin_network/user_status.htm b/luci-app-oaf/luasrc/view/admin_network/user_status.htm
index 1fb1ebd..b7bd383 100755
--- a/luci-app-oaf/luasrc/view/admin_network/user_status.htm
+++ b/luci-app-oaf/luasrc/view/admin_network/user_status.htm
@@ -1,32 +1,3 @@
-<style type="text/css">
-<%
-local dsp = require "luci.dispatcher"
--%>
-
-table.imagetable {
-    font-family: verdana,arial,sans-serif;
-    font-size:11px;
-    color:#333333;
-    border-width: 1px;
-    border-color: #999999;
-    border-collapse: collapse;
-}
-<!--
-table.imagetable th {
-    background:#f5f5f5
-    border-width: 0px;
-    padding: 5px;
-    border-style: solid;
-    border-color: #999999;
-}
-table.imagetable td {
-    background:#ffffffff
-    border-width: 0px;
-    padding: 5px;
-    border-style: solid;
-    border-color: #999999;
-}-->
-</style>
 <script type="text/javascript">//<![CDATA[
 	XHR.poll(5, '<%=url('admin/network/dev_app_status')%>', null,
 		function(x, st)
@@ -48,7 +19,9 @@ table.imagetable td {
 						hostname=devlist[i].hostname;
 					}
 					var tr = tb.insertRow(-1);
-					//tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
+					tr.className = 'tr cbi-rowstyle-' + ((i % 2) + 1);
+					$('tr').find('td').attr('class', 'td');
+					//tr.insertCell().className = 'td';
 					tr.insertCell(-1).innerHTML = i + 1;
 					tr.insertCell(-1).innerHTML = hostname;
 					tr.insertCell(-1).innerHTML = "<a href='<%=url('admin/network/appfilter/')%>"+devlist[i].mac+"'>"+devlist[i].mac+"</a>";
@@ -76,19 +49,19 @@ table.imagetable td {
 //]]></script>
 
 
-<fieldset class="cbi-section">
-	<legend><%:Client List%></legend>
-	<table class="imagetable" id="user_status_table">
-		<tr>
-			<th ><%:Id%></th>
-			<th ><%:Hostname%></th>
-			<th ><%:Mac%></th>
-			<th ><%:Ip%></th>
-			<th><%:Common App(TOP5)%></th>
-			<th><%:Online Status%></th>
+<div class="cbi-section cbi-tblsection">
+	<h3><%:Client List%></h3>
+	<table class="table cbi-section-table" id="user_status_table">
+		<tr class="tr table-titles">
+			<th class="th"><%:Id%></th>
+			<th class="th"><%:Hostname%></th>
+			<th class="th"><%:Mac%></th>
+			<th class="th"><%:Ip%></th>
+			<th class="th"><%:Common App(TOP5)%></th>
+			<th class="th"><%:Online Status%></th>
 		</tr>
-		<tr>
-			<td colspan="8"><em><br /><%:Collecting data...%></em></td>
+		<tr class="tr">
+			<td class="td" colspan="8"><em><br /><%:Collecting data...%></em></td>
 		</tr>
 	</table>
 </fieldset>