scrollbar import page

public/userarea/import_xls2.php

@@ -40,6 +40,22 @@ error_log("Loaded template: " . print_r($template, true));
     <?php include('cssinclude.php'); ?>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
+        .top-scrollbar {
+            overflow-x: auto;
+            overflow-y: hidden;
+            width: 100%;
+            height: 18px;
+            margin-bottom: 8px;
+            border: 1px solid #dee2e6;
+            border-radius: 0.25rem;
+            background: #f8f9fa;
+            display: none;
+        }
+
+        .top-scrollbar-inner {
+            height: 1px;
+        }
+
         .table-container {
             overflow-x: auto;
             max-width: 100%;
@@ -324,8 +340,12 @@ error_log("Loaded template: " . print_r($template, true));
         <button type="submit" class="btn btn-primary" id="proceedButtonTop" disabled>Prosegui</button>
     </div>
 
-    <div class="table-container">
+<div class="top-scrollbar" id="topTableScrollbar">
-        <table class="table table-striped table-bordered">
+    <div class="top-scrollbar-inner" id="topTableScrollbarInner"></div>
+</div>
+
+<div class="table-container" id="mainTableContainer">
+    <table class="table table-striped table-bordered" id="importPreviewTable">
             <thead>
                 <tr>
                     <th><input type="checkbox" id="selectAll"> Seleziona</th>
@@ -363,6 +383,47 @@ error_log("Loaded template: " . print_r($template, true));
 `;
                 tableContainer.innerHTML = html;
 
+                const topTableScrollbar = document.getElementById('topTableScrollbar');
+                const topTableScrollbarInner = document.getElementById('topTableScrollbarInner');
+                const mainTableContainer = document.getElementById('mainTableContainer');
+                const importPreviewTable = document.getElementById('importPreviewTable');
+
+                function updateTopTableScrollbar() {
+                    if (!topTableScrollbar || !topTableScrollbarInner || !mainTableContainer || !importPreviewTable) return;
+
+                    topTableScrollbarInner.style.width = importPreviewTable.scrollWidth + 'px';
+
+                    if (mainTableContainer.scrollWidth > mainTableContainer.clientWidth) {
+                        topTableScrollbar.style.display = 'block';
+                    } else {
+                        topTableScrollbar.style.display = 'none';
+                    }
+                }
+
+                let syncingTop = false;
+                let syncingBottom = false;
+
+                if (topTableScrollbar && mainTableContainer) {
+                    topTableScrollbar.addEventListener('scroll', function() {
+                        if (syncingBottom) return;
+                        syncingTop = true;
+                        mainTableContainer.scrollLeft = topTableScrollbar.scrollLeft;
+                        syncingTop = false;
+                    });
+
+                    mainTableContainer.addEventListener('scroll', function() {
+                        if (syncingTop) return;
+                        syncingBottom = true;
+                        topTableScrollbar.scrollLeft = mainTableContainer.scrollLeft;
+                        syncingBottom = false;
+                    });
+                }
+
+                updateTopTableScrollbar();
+                setTimeout(updateTopTableScrollbar, 100);
+                setTimeout(updateTopTableScrollbar, 300);
+                window.addEventListener('resize', updateTopTableScrollbar);
+
                 const proceedButtonTop = document.getElementById('proceedButtonTop');
                 const proceedButtonBottom = document.getElementById('proceedButtonBottom');
                 const selectAllCheckbox = document.getElementById('selectAll');
@@ -493,4 +554,4 @@ error_log("Loaded template: " . print_r($template, true));
     </script>
 </body>
 
-</html>
+</html>