Table Column Resizer

WHAT IT DOES Table Column Resizer is a floating panel that adds interactive, draggable resize handles to any table on the current page. Select a table from a list of automatically detected tables, and the panel adds visual dividers between each column header that you can drag left or right to adjust column widths in real-time. A floating indicator shows the current width as you drag, making precise adjustments easy. Double‑click any handle to instantly auto‑fit the column to its content width. The panel includes a "Reset Column Widths" button to restore all columns to their original sizes, and all width preferences are automatically persisted per domain—so your adjustments remain across page reloads. You can copy the current column widths as a CSS snippet or insert them directly into any editable field on the page (input, textarea, or contenteditable). Perfect for anyone who frequently works with tables in web apps—data analysts, QA engineers, dashboard users, or anyone frustrated by cramped or overly wide columns. WHERE IT RUNS The panel overlays any website that loads the BotGentz extension—whether you're on a data dashboard, a CRM, a project management tool, an admin panel, a spreadsheet view, or any other web page. It works on all modern Chromium‑based browsers (Chrome, Edge, Brave, Arc) and Firefox. The script injects a self‑contained UI element that does not interfere with the host page's layout, styles, or JavaScript execution. It runs client‑side only, with no external API calls or cloud dependencies. HOW TO USE After installing the free BotGentz extension, visit any page and click the extension icon to activate the panel. The first time you use Table Column Resizer, it will appear as a draggable widget near the bottom‑right corner of your viewport. To resize columns: - Select a table from the dropdown menu. The panel automatically detects all tables on the page. - Click "Enable Resizing" to add draggable handles between each column header. - Drag any handle left or right to resize the column on that side. A floating indicator shows the current width. - Double‑click any handle to auto‑fit that column to its content width. - Click "Disable Resizing" to remove the handles and restore the table to its original state. To manage widths: - Click "Reset Column Widths" to restore all columns to their original sizes. - Click "Copy Column Widths" to copy the current widths as a CSS snippet. - Click "Insert Widths into Active Field" to paste the widths into the focused editable field. The panel remembers your column width preferences per domain, so they persist across page reloads. PRECISION DRAG ENGINE WITH RESIZE OBSERVER AND PERSISTENCE LAYER Unlike basic CSS resizing tools that only work in specific environments, this panel uses a precision drag engine that directly manipulates table cell widths at the DOM level. When a user drags a handle, the engine captures mousedown, mousemove, and mouseup events with pixel‑level precision, updating the width of the corresponding element in real-time. A ResizeObserver watches the table for layout changes and repositions handles accordingly, ensuring they stay aligned with column boundaries even when the table is re‑rendered or the page is scrolled. The engine also updates elements when present, ensuring consistent width application across the entire column. The double‑click auto‑fit calculates the maximum content width across all rows in that column (using a combination of text length and character width approximation) and sets the column to that width. The persistence layer stores width arrays keyed by a unique table selector (ID, class, or index) in GM_setValue, allowing the panel to restore user‑preferred widths on subsequent visits to the same domain without any manual intervention. THE PANEL - Drag: Click and hold the panel's header bar to move it anywhere on the screen. - Per‑site position: The panel stores its last position separately for each domain using the browser's localStorage, keyed by hostname. - Snap: When dragged near any edge of the viewport, the panel snaps to that edge with a 16px margin for a clean, docked feel. - Collapse: Click the "−" button in the header to collapse the panel to a compact title bar, preserving all current values. Click "+" to expand it back. - Resize: Drag the bottom‑right corner handle to resize the panel from 280px to 600px wide and 200px to 500px tall; the layout adapts responsively. - Escape: Press the Escape key while the panel is focused to close it entirely (you can reopen it from the extension toolbar). PLEASE NOTE This script requires the free BotGentz extension to run—it is not a standalone bookmarklet or user script. Websites frequently update their DOM structures and security policies; while we strive to keep the panel functional across thousands of sites, occasional updates may be needed. The resizer performs all operations entirely in your browser—no data is sent to any server, and no cookies or tracking identifiers are used. Your column width preferences remain private to your local session and are persisted only via GM_setValue (the extension's local storage) for convenience, not shared across devices or sessions. The resizer works best on tables with a consistent column structure; tables with complex rowspan or colspan layouts may not behave as expected. The auto‑fit calculation is an approximation based on character count and average character width; for precise fitting, manual adjustment may still be needed.