Resizable Columns Table — Drag-to-Resize HTML CSS JS

Spreadsheets and admin data grids earn user trust partly through small mechanical details, and column resizing is one of the most expected: if a column is too narrow to read, a user should be able to widen it themselves rather than wait for a developer to adjust a CSS value. This snippet builds that resize interaction in plain HTML, CSS, and vanilla JavaScript, using table-layout: fixed and per-column pixel widths rather than the browser's unpredictable default auto-layout.

Fixed layout makes widths controllable

By default, HTML tables use table-layout: auto, where column widths are computed from cell content and can shift unpredictably as the browser balances every column at once. Setting table-layout: fixed and giving each <th> an explicit width makes every column's size deterministic and directly settable — a prerequisite for a resize handle to mean anything, since otherwise the browser could silently override whatever width JavaScript just set.

A handle per column, not a global resize mode

Each resizable <th> contains a thin absolutely positioned <span class="rct-handle"> pinned to its right edge with cursor: col-resize. On mousedown, the handler captures the starting mouse X and the column's current offsetWidth, then attaches temporary mousemove/mouseup listeners on document (not the handle itself) — this is essential, because once the mouse moves fast during a drag it will leave the thin handle element entirely, and a listener scoped only to the handle would stop firing mid-drag.

A real minimum width, not just a visual suggestion

Every resize computation runs through Math.max(MIN_WIDTH, …), so a column can never be dragged narrower than 70px regardless of how far left the mouse moves — protecting against a column collapsing to zero width and becoming permanently impossible to grab again (a real failure state in resize implementations that skip this clamp).

Double-click to auto-fit, the spreadsheet convention

Double-clicking a resize handle measures every cell in that column's scrollWidth (the content's actual rendered width, ignoring the current clipped width), takes the largest, adds a small padding allowance, and sets the column to that size — auto-fitting the column to its widest content in one click, exactly like Excel and Google Sheets' double-click-the-column-border behavior.

Why mousemove lives on document, not the handle

A drag gesture routinely moves faster than the cursor stays over a 7px-wide handle, especially on a quick flick. Binding the move/up listeners to document instead of the handle itself means the resize keeps tracking correctly even once the pointer has drifted well off the original element — a detail that's easy to skip in a first draft and only surfaces as a bug report once someone drags quickly instead of slowly.