Universal Sticky Table Header

WHAT IT DOES

Universal Sticky Table Header automatically detects HTML tables on any webpage and makes their header rows sticky so they remain visible while scrolling vertically. As you scroll down through a long table, the header stays pinned at the top of the viewport, keeping column labels always in sight. A subtle shadow effect appears beneath the sticky header to visually indicate that it is frozen. The script supports tables with multiple header rows, nested tables, and tables inside scrollable containers, ensuring compatibility with complex page layouts. When you hover over or click a header cell, it highlights to show which column is active, making it easier to track data across wide tables.

WHERE IT RUNS

This script operates as a userscript within the BotGentz extension on any webpage that contains HTML tables, including data dashboards, spreadsheets, project management tools, financial reports, and comparison charts. It functions on any modern browser that supports the BotGentz extension, including Chrome, Firefox, Edge, Safari, and Opera. The script runs entirely client-side, modifying table styles locally without sending any data to external servers.

HOW TO USE

After installation, the script automatically detects tables on the page and applies sticky headers. As you scroll down any table, the header row stays at the top of the viewport with a subtle shadow. The floating control panel in the bottom-left corner shows the number of tables with sticky headers applied. Use the panel to pause or resume the sticky header feature, or click "Reset" to restore all settings to defaults. To customize the behavior, open the main panel and adjust the shadow intensity (none, low, medium, high), set the maximum number of header rows to make sticky, change header background opacity, or exclude specific tables using CSS selectors. Toggle header highlighting on hover or auto-detection of tables as needed.

THE MECHANISM THAT MAKES IT WORK

The script uses CSS position: sticky applied to table header cells, with z-index layering to ensure headers appear above table content. For tables with multiple header rows, the script applies sticky positioning to each row in the thead, allowing complex multi-level headers to remain visible. The shadow effect is implemented using CSS box-shadow with configurable intensity, applied to the table element itself rather than individual cells for smoother performance. Header highlighting uses CSS class toggling with hover and click event listeners. The script handles tables inside scrollable containers by detecting the nearest scrollable parent and applying appropriate positioning. Table detection uses a DOM traversal approach that identifies all table elements, validates they have header rows, and applies sticky styles only to qualifying tables. Exclusion selectors are processed using CSS selector matching and Element.closest() for precise targeting.

THE PANEL

The script panel is built using BotGentz's BGPanel framework and provides comprehensive control over the sticky header behavior. The panel opens as a floating overlay that can be dragged anywhere on your screen, with a clean dark theme matching the tool's aesthetic. It includes dropdown menus for shadow intensity selection (none, low, medium, high), maximum sticky rows (1-5), and header background opacity (70-100%). A text input allows you to specify CSS selectors for tables to exclude from sticky behavior. Toggle switches enable or disable the sticky feature, header highlighting on hover, and auto-detection of tables. Action buttons allow you to refresh tables, save settings, or reset all settings to defaults. The panel collapses to a small icon when not in use and expands when clicked, remaining accessible but unobtrusive. Press the Escape key at any time to close the panel.

PLEASE NOTE

This script requires the free BotGentz extension to be installed and activated in your browser. The extension is available from the official BotGentz website. The sticky header feature works on standard HTML tables with proper thead/th structure—tables without header rows may not be supported. Tables with complex colspan or rowspan may have inconsistent behavior when applying sticky positioning. The script modifies table styling using CSS position: sticky, which may interact with other styles on the page. If a table is dynamically loaded or modified after page load, click "Refresh Tables" to re-apply sticky headers. Excluding tables by CSS selector allows you to prevent sticky headers on specific tables that may have conflicting styles. No data is collected, stored, or transmitted by this script; all processing is performed locally in your browser.