From: Giorgio Ravera <giorgio.ravera@gmail.com>
Date: Tue, 9 Jun 2026 12:54:47 +0000 (+0200)
Subject: Added table wrapper to improve mobile view
X-Git-Tag: v0.0.2~19
X-Git-Url: http://git.giorgioravera.it/?a=commitdiff_plain;h=d5564b579f5a04056a930b782cb1f6a6b6aba51d;p=network-manager.git

Added table wrapper to improve mobile view
---

diff --git a/frontend/aliases.html b/frontend/aliases.html
index c7af665..303b02b 100644
--- a/frontend/aliases.html
+++ b/frontend/aliases.html
@@ -129,19 +129,21 @@
         </div>
     </section>
 
-    <!-- Tabella -->
-    <table id="dataTable" class="table table-bordered table-hover align-middle d-none">
-        <thead class="table-light">
-            <tr>
-                <th data-type="string" data-sortable="true" data-sort="0">Alias      <span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="true" data-sort="1">Target     <span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="true" data-sort="2">Description<span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="true" data-sort="3">Options    <span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="false" data-sort="4">Actions   <span class="sort-arrow" aria-hidden="true"></span></th>
-            </tr>
-        </thead>
-        <tbody></tbody>
-    </table>
+    <!-- Tabella responsive -->
+    <div id="tableWrapper" class="table-responsive mobile-scroll d-none">
+        <table id="dataTable" class="table table-bordered table-hover align-middle">
+            <thead class="table-light">
+                <tr>
+                    <th data-type="string" data-sortable="true"  data-sort="0">Alias      <span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="string" data-sortable="true"  data-sort="1">Target     <span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="string" data-sortable="true"  data-sort="2">Description<span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="string" data-sortable="true"  data-sort="3">Options    <span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="string" data-sortable="false" data-sort="4">Actions    <span class="sort-arrow" aria-hidden="true"></span></th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </div>
 
     <!-- Loader -->
     <div id="loader" class="text-center my-3" style="display: none;">
diff --git a/frontend/css/layout.css b/frontend/css/layout.css
index 289ff5b..cd67a28 100644
--- a/frontend/css/layout.css
+++ b/frontend/css/layout.css
@@ -9,8 +9,7 @@
 
 body {
     font-family: sans-serif;
-    margin: 20px;
-    padding-top: 60px; /* space for fixed topbar */
+    margin: 0;
     background-color: var(--bg-light);
     color: var(--text-dark);
 }
@@ -28,9 +27,8 @@ body {
     width: 100%;
     background: var(--bg-dark);
     border-bottom: 3px solid var(--accent);
-    position: fixed;
+    position: sticky;
     top: 0;
-    left: 0;
     z-index: 1000;
 }
 
@@ -41,6 +39,8 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
 }
 
 .topbar .navbar {
@@ -85,8 +85,8 @@ body {
     background-color: var(--bg-frame);
     border-left: 4px solid var(--accent);
     padding: 6px 14px;
-    margin-bottom: 25px;
     box-shadow: 0 3px 6px rgba(0,0,0,0.18);
+    margin: 20px 20px 25px 20px;
 }
 
 .page-frame h2 {
@@ -216,7 +216,7 @@ body {
     border: none;
     padding: 6px 14px;
     font-size: 0.95rem;
-    line-height: 1;
+    line-height: 1.2;
     vertical-align: middle;
     --icon-color: currentColor;
     transition: all 0.2s ease;
@@ -334,9 +334,8 @@ select.form-select:focus,
    ================================ */
 .icon,
 i.bi {
-    color: var(--icon-color);
-    display: inline-flex;
-    align-items: center;
+    color: var(--icon-color, currentColor);
+    vertical-align: middle;
 }
 
 .icon-static {
@@ -361,24 +360,45 @@ i.bi {
 /* ================================
    Table
    ================================ */
-.table {
-    background-color: #fff;
+.table-responsive {
+    position: relative;
+    margin: 20px;
+    width: calc(100% - 40px);
+    max-height: calc(100vh - 185px);
+    overflow-x: auto;
+    overflow-y: auto;
+    border-radius: 10px;
     box-shadow: 0 3px 6px rgba(0,0,0,0.18);
+    background-color: #fff;
+    -webkit-overflow-scrolling: touch;
+    border: 1px solid var(--border-light);
+}
+
+.table {
+    width: 100%;             /* desktop full width */
+    min-width: max-content;  /* mobile -> scroll */
+    margin: 0;
+    table-layout: auto;
     border-color: var(--border-light);
+    border-style: hidden;
 }
 
 .table th,
 .table td {
     vertical-align: middle;
     border-color: var(--border-light);
+    white-space: nowrap;   /* niente wrap */
 }
 
 .table thead th {
     background-color: #eee;
+    background-clip: padding-box;
     font-weight: 700;
     cursor: default;
     user-select: none;
-    position: relative;
+    position: sticky;
+    top: 0;
+    z-index: 2;
 }
 
 .table thead th:hover::after {
@@ -627,8 +647,46 @@ td.actions {
    Responsive
    ================================ */
 @media (max-width: 640px) {
-    body {
-        padding-top: 48px; /* topbar più compatta su mobile */
+
+    .topbar-inner {
+        flex-wrap: nowrap;
+    }
+
+    .topbar .navbar {
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .logo span {
+        font-size: 1.1rem;
+        white-space: nowrap;
+    }
+
+    .page-frame {
+        margin: 10px 10px 15px 10px;
+    }
+
+    .table-responsive {
+        margin: 10px;
+        width: calc(100% - 20px);
+        max-height: calc(100dvh - 11.5rem);
+    }
+
+    .table {
+        font-size: 0.85rem;
+    }
+
+    .table th,
+    .table td {
+        padding: 0.45rem;
+    }
+
+    .btn {
+        padding-left: 0.6rem;
+        padding-right: 0.6rem;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
     }
 
     /* Toolbar: su schermi molto stretti mostra solo le icone dei bottoni */
@@ -636,7 +694,8 @@ td.actions {
         display: none;
     }
 
-    .btn .icon {
+    .btn .icon,
+    .btn .bi {
         margin-right: 0;
     }
 }
diff --git a/frontend/devices.html b/frontend/devices.html
index 2d2356d..6ca3e36 100644
--- a/frontend/devices.html
+++ b/frontend/devices.html
@@ -129,21 +129,23 @@
         </div>
     </section>
 
-    <!-- Tabella -->
-    <table id="dataTable" class="table table-bordered table-hover align-middle d-none">
-        <thead class="table-light">
-            <tr>
-                <th data-type="ipv4"   data-sortable="true" data-sort="0">IP Address <span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="mac"    data-sortable="true" data-sort="1">MAC Address<span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="true" data-sort="2">Hostname   <span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="true" data-sort="3">Description<span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="true" data-sort="4">State      <span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="true" data-sort="5">Active     <span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="false" data-sort="6">Actions   <span class="sort-arrow" aria-hidden="true"></span></th>
-            </tr>
-        </thead>
-        <tbody></tbody>
-    </table>
+    <!-- Tabella responsive -->
+    <div id="tableWrapper" class="table-responsive mobile-scroll d-none">
+        <table id="dataTable" class="table table-bordered table-hover align-middle">
+            <thead class="table-light">
+                <tr>
+                    <th data-type="ipv4"   data-sortable="true" data-sort="0">IP Address <span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="mac"    data-sortable="true" data-sort="1">MAC Address<span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="string" data-sortable="true" data-sort="2">Hostname   <span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="string" data-sortable="true" data-sort="3">Description<span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="string" data-sortable="true" data-sort="4">State      <span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="string" data-sortable="true" data-sort="5">Active     <span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="string" data-sortable="false" data-sort="6">Actions   <span class="sort-arrow" aria-hidden="true"></span></th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </div>
 
     <!-- Loader -->
     <div id="loader" class="text-center my-3" style="display: none;">
diff --git a/frontend/hosts.html b/frontend/hosts.html
index ba45343..8195198 100644
--- a/frontend/hosts.html
+++ b/frontend/hosts.html
@@ -129,20 +129,22 @@
         </div>
     </section>
 
-    <!-- Tabella -->
-    <table id="dataTable" class="table table-bordered table-hover align-middle d-none">
-        <thead class="table-light">
-            <tr>
-                <th data-type="string" data-sortable="true" data-sort="0">Hostname   <span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="ipv4"   data-sortable="true" data-sort="1">IP Address <span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="mac"    data-sortable="true" data-sort="2">MAC Address<span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="true" data-sort="3">Description<span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="true" data-sort="4">Options    <span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="false" data-sort="5">Actions    <span class="sort-arrow" aria-hidden="true"></span></th>
-            </tr>
-        </thead>
-        <tbody></tbody>
-    </table>
+    <!-- Tabella responsive -->
+    <div id="tableWrapper" class="table-responsive mobile-scroll d-none">
+        <table id="dataTable" class="table table-bordered table-hover align-middle">
+            <thead class="table-light">
+                <tr>
+                    <th data-type="string" data-sortable="true"  data-sort="0">Hostname    <span class="sort-arrow"></span></th>
+                    <th data-type="ipv4"   data-sortable="true"  data-sort="1">IP Address  <span class="sort-arrow"></span></th>
+                    <th data-type="mac"    data-sortable="true"  data-sort="2">MAC Address <span class="sort-arrow"></span></th>
+                    <th data-type="string" data-sortable="true"  data-sort="3">Description <span class="sort-arrow"></span></th>
+                    <th data-type="string" data-sortable="true"  data-sort="4">Options     <span class="sort-arrow"></span></th>
+                    <th data-type="string" data-sortable="false" data-sort="5">Actions     <span class="sort-arrow"></span></th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </div>
 
     <!-- Loader -->
     <div id="loader" class="text-center my-3" style="display: none;">
diff --git a/frontend/js/aliases.js b/frontend/js/aliases.js
index 5096958..a5a0cd0 100644
--- a/frontend/js/aliases.js
+++ b/frontend/js/aliases.js
@@ -16,10 +16,10 @@ const sortState = { sortDirection: {}, lastSort: null };
 // -----------------------------
 async function fetchAliases () {
     const loader = document.getElementById("loader");
-    const dataTable = document.getElementById("dataTable");
+    const tableWrapper = document.getElementById("tableWrapper");
 
     // hide table during loading to avoid flickering and show loader
-    dataTable.classList.add("d-none");
+    tableWrapper.classList.add("d-none");
 
     try {
         // Show loader
@@ -36,7 +36,7 @@ async function fetchAliases () {
         viewAliases = [];
         // hide loader and show table
         loader.style.display = "none";
-        dataTable.classList.remove("d-none");
+        tableWrapper.classList.remove("d-none");
     }
 }
 
@@ -45,7 +45,7 @@ async function fetchAliases () {
 // -----------------------------
 function updateTable () {
     const loader = document.getElementById("loader");
-    const dataTable = document.getElementById("dataTable");
+    const tableWrapper = document.getElementById("tableWrapper");
 
     // DOM Reference
     const tbody = document.querySelector("#dataTable tbody");
@@ -68,7 +68,7 @@ function updateTable () {
         tbody.appendChild(trEmpty);
         // hide loader and show table
         loader.style.display = "none";
-        dataTable.classList.remove("d-none");
+        tableWrapper.classList.remove("d-none");
         return;
     }
 
@@ -228,7 +228,7 @@ function updateTable () {
 
     // hide loader and show table
     loader.style.display = "none";
-    dataTable.classList.remove("d-none");
+    tableWrapper.classList.remove("d-none");
 
     // apply current search filter
     const searchInput = document.getElementById("searchInput");
diff --git a/frontend/js/devices.js b/frontend/js/devices.js
index 0d7779a..ad00407 100644
--- a/frontend/js/devices.js
+++ b/frontend/js/devices.js
@@ -16,10 +16,10 @@ const sortState = { sortDirection: {}, lastSort: null };
 // -----------------------------
 async function fetchDevices () {
     const loader = document.getElementById("loader");
-    const dataTable = document.getElementById("dataTable");
+    const tableWrapper = document.getElementById("tableWrapper");
 
     // hide table during loading to avoid flickering and show loader
-    dataTable.classList.add("d-none");
+    tableWrapper.classList.add("d-none");
 
     try {
         // Show loader
@@ -36,7 +36,7 @@ async function fetchDevices () {
         viewDevices = [];
         // hide loader and show table
         loader.style.display = "none";
-        dataTable.classList.remove("d-none");
+        tableWrapper.classList.remove("d-none");
     }
 }
 
@@ -45,7 +45,7 @@ async function fetchDevices () {
 // -----------------------------
 function updateTable () {
     const loader = document.getElementById("loader");
-    const dataTable = document.getElementById("dataTable");
+    const tableWrapper = document.getElementById("tableWrapper");
 
     // DOM Reference
     const tbody = document.querySelector("#dataTable tbody");
@@ -68,7 +68,7 @@ function updateTable () {
         tbody.appendChild(trEmpty);
         // hide loader and show table
         loader.style.display = "none";
-        dataTable.classList.remove("d-none");
+        tableWrapper.classList.remove("d-none");
         return;
     }
 
@@ -289,7 +289,7 @@ function updateTable () {
 
     // hide loader and show table
     loader.style.display = "none";
-    dataTable.classList.remove("d-none");
+    tableWrapper.classList.remove("d-none");
 
     // apply current search filter
     const searchInput = document.getElementById("searchInput");
diff --git a/frontend/js/hosts.js b/frontend/js/hosts.js
index 4ce2932..e9b6d6e 100644
--- a/frontend/js/hosts.js
+++ b/frontend/js/hosts.js
@@ -16,10 +16,10 @@ const sortState = { sortDirection: {}, lastSort: null };
 // -----------------------------
 async function fetchHosts () {
     const loader = document.getElementById("loader");
-    const dataTable = document.getElementById("dataTable");
+    const tableWrapper = document.getElementById("tableWrapper");
 
     // hide table during loading to avoid flickering and show loader
-    dataTable.classList.add("d-none");
+    tableWrapper.classList.add("d-none");
 
     try {
         // Show loader
@@ -36,7 +36,7 @@ async function fetchHosts () {
         viewHosts = [];
         // hide loader and show table
         loader.style.display = "none";
-        dataTable.classList.remove("d-none");
+        tableWrapper.classList.remove("d-none");
     }
 }
 
@@ -45,7 +45,7 @@ async function fetchHosts () {
 // -----------------------------
 function updateTable () {
     const loader = document.getElementById("loader");
-    const dataTable = document.getElementById("dataTable");
+    const tableWrapper = document.getElementById("tableWrapper");
 
     // DOM Reference
     const tbody = document.querySelector("#dataTable tbody");
@@ -68,7 +68,7 @@ function updateTable () {
         tbody.appendChild(trEmpty);
         // hide loader and show table
         loader.style.display = "none";
-        dataTable.classList.remove("d-none");
+        tableWrapper.classList.remove("d-none");
         return;
     }
 
@@ -238,7 +238,7 @@ function updateTable () {
 
     // hide loader and show table
     loader.style.display = "none";
-    dataTable.classList.remove("d-none");
+    tableWrapper.classList.remove("d-none");
 
     // apply current search filter
     const searchInput = document.getElementById("searchInput");
diff --git a/frontend/js/leases.js b/frontend/js/leases.js
index 3e6b5b6..36b6daa 100644
--- a/frontend/js/leases.js
+++ b/frontend/js/leases.js
@@ -15,10 +15,10 @@ const sortState = { sortDirection: {}, lastSort: null };
 // -----------------------------
 async function fetchLeases () {
     const loader = document.getElementById("loader");
-    const dataTable = document.getElementById("dataTable");
+    const tableWrapper = document.getElementById("tableWrapper");
 
     // hide table during loading to avoid flickering and show loader
-    dataTable.classList.add("d-none");
+    tableWrapper.classList.add("d-none");
 
     try {
         // Show loader
@@ -35,7 +35,7 @@ async function fetchLeases () {
         viewLeases = [];
         // hide loader and show table
         loader.style.display = "none";
-        dataTable.classList.remove("d-none");
+        tableWrapper.classList.remove("d-none");
     }
 }
 
@@ -44,7 +44,7 @@ async function fetchLeases () {
 // -----------------------------
 function updateTable () {
     const loader = document.getElementById("loader");
-    const dataTable = document.getElementById("dataTable");
+    const tableWrapper = document.getElementById("tableWrapper");
 
     // DOM Reference
     const tbody = document.querySelector("#dataTable tbody");
@@ -67,7 +67,7 @@ function updateTable () {
         tbody.appendChild(trEmpty);
         // hide loader and show table
         loader.style.display = "none";
-        dataTable.classList.remove("d-none");
+        tableWrapper.classList.remove("d-none");
         return;
     }
 
@@ -253,7 +253,7 @@ function updateTable () {
 
     // hide loader and show table
     loader.style.display = "none";
-    dataTable.classList.remove("d-none");
+    tableWrapper.classList.remove("d-none");
 
     // apply current search filter
     const searchInput = document.getElementById("searchInput");
diff --git a/frontend/js/settings.js b/frontend/js/settings.js
index 39b5aaa..a3a42f1 100644
--- a/frontend/js/settings.js
+++ b/frontend/js/settings.js
@@ -57,10 +57,10 @@ function getConfigValueFromForm() {
 // -----------------------------
 async function fetchConfigs () {
     const loader = document.getElementById("loader");
-    const dataTable = document.getElementById("dataTable");
+    const tableWrapper = document.getElementById("tableWrapper");
 
     // hide table during loading to avoid flickering and show loader
-    dataTable.classList.add("d-none");
+    tableWrapper.classList.add("d-none");
 
     try {
         // Show loader
@@ -77,7 +77,7 @@ async function fetchConfigs () {
         viewConfigs = [];
         // hide loader and show table
         loader.style.display = "none";
-        dataTable.classList.remove("d-none");
+        tableWrapper.classList.remove("d-none");
     }
 }
 
@@ -216,7 +216,7 @@ async function restartApp(button) {
 // -----------------------------
 function updateTable () {
     const loader = document.getElementById("loader");
-    const dataTable = document.getElementById("dataTable");
+    const tableWrapper = document.getElementById("tableWrapper");
     const searchInput = document.getElementById("searchInput");
     const term = searchInput?.value?.trim().toLowerCase();
     const hasSearch = !!term;
@@ -254,7 +254,7 @@ function updateTable () {
         tbody.appendChild(trEmpty);
         // hide loader and show table
         loader.style.display = "none";
-        dataTable.classList.remove("d-none");
+        tableWrapper.classList.remove("d-none");
         return;
     }
 
@@ -401,7 +401,7 @@ function updateTable () {
 
     // hide loader and show table
     loader.style.display = "none";
-    dataTable.classList.remove("d-none");
+    tableWrapper.classList.remove("d-none");
 }
 
 // -----------------------------
diff --git a/frontend/leases.html b/frontend/leases.html
index 9ba5322..ddcbebe 100644
--- a/frontend/leases.html
+++ b/frontend/leases.html
@@ -129,21 +129,23 @@
         </div>
     </section>
 
-    <!-- Tabella -->
-    <table id="dataTable" class="table table-bordered table-hover align-middle d-none">
-        <thead class="table-light">
-            <tr>
-                <th data-type="ipv4"   data-sortable="true" data-sort="0">IP Address<span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="mac"    data-sortable="true" data-sort="1">MAC       <span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="true" data-sort="2">Hostname  <span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="true" data-sort="3">Start     <span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="true" data-sort="4">End       <span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="true" data-sort="5">State     <span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="false" data-sort="6">Actions  <span class="sort-arrow" aria-hidden="true"></span></th>
-            </tr>
-        </thead>
-        <tbody></tbody>
-    </table>
+    <!-- Tabella responsive -->
+    <div id="tableWrapper" class="table-responsive mobile-scroll d-none">
+        <table id="dataTable" class="table table-bordered table-hover align-middle">
+            <thead class="table-light">
+                <tr>
+                    <th data-type="ipv4"   data-sortable="true"  data-sort="0">IP Address<span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="mac"    data-sortable="true"  data-sort="1">MAC       <span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="string" data-sortable="true"  data-sort="2">Hostname  <span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="string" data-sortable="true"  data-sort="3">Start     <span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="string" data-sortable="true"  data-sort="4">End       <span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="string" data-sortable="true"  data-sort="5">State     <span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="string" data-sortable="false" data-sort="6">Actions   <span class="sort-arrow" aria-hidden="true"></span></th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </div>
 
     <!-- Loader -->
     <div id="loader" class="text-center my-3" style="display: none;">
diff --git a/frontend/settings.html b/frontend/settings.html
index 46085c9..43cd2a1 100644
--- a/frontend/settings.html
+++ b/frontend/settings.html
@@ -127,18 +127,20 @@
         </div>
     </section>
 
-    <!-- Tabella -->
-    <table id="dataTable" class="table table-bordered table-hover align-middle d-none">
-        <thead class="table-light">
-            <tr>
-                <th data-type="string" data-sortable="false">Parameter  <span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="false">Value      <span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="false">Description<span class="sort-arrow" aria-hidden="true"></span></th>
-                <th data-type="string" data-sortable="false">Actions   <span class="sort-arrow" aria-hidden="true"></span></th>
-            </tr>
-        </thead>
-        <tbody></tbody>
-    </table>
+    <!-- Tabella responsive -->
+    <div id="tableWrapper" class="table-responsive mobile-scroll d-none">
+        <table id="dataTable" class="table table-bordered table-hover align-middle">
+            <thead class="table-light">
+                <tr>
+                    <th data-type="string" data-sortable="false">Parameter  <span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="string" data-sortable="false">Value      <span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="string" data-sortable="false">Description<span class="sort-arrow" aria-hidden="true"></span></th>
+                    <th data-type="string" data-sortable="false">Actions    <span class="sort-arrow" aria-hidden="true"></span></th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </div>
 
     <!-- Loader -->
     <div id="loader" class="text-center my-3" style="display: none;">