Resizable Table Columns — Free HTML CSS JS Snippet

Column resizing is the feature that makes people reach for a data-grid library, and it is roughly sixty lines of vanilla JavaScript once you know which element to actually resize. This snippet implements the full interaction — drag handles between headers, a minimum width floor, live feedback during the drag, double-click auto-fit, and a reset — with no dependencies and no re-render of the table body.

Resizing the colgroup, not the cells

The naive approach sets a width on the <th> and hopes the body cells follow. They often do not, because without a fixed layout algorithm the browser is free to redistribute space based on content. This snippet uses table-layout: fixed together with a <colgroup> of <col> elements, and resizing writes to col.style.width. That single write re-lays the entire column — header and every body cell — in one operation, because <col> exists precisely to carry column-level presentation. It is also the cheapest possible update: one style change rather than one per row.

Pointer events and setPointerCapture

The drag uses pointer events rather than mouse events, so one code path serves a mouse, a finger and a stylus. setPointerCapture() on the grip is what makes the drag survive leaving the element — without it, moving the cursor faster than the browser repaints drops the pointer outside the 11px handle and the resize stops mid-gesture. Capture redirects every subsequent move to the original element until release, which is the correct primitive for any drag and a far better fit than attaching temporary listeners to document.

A hit area wider than the line it draws

The visible divider is a 1px line, and a 1px drag target would be unusable. The .rc-grip element is 11 pixels wide and positioned to straddle the column boundary, with the thin line drawn by a pseudo-element inside it. The handle grows and turns indigo on hover so the affordance is obvious before the user commits. touch-action: none on the grip stops the browser interpreting the drag as a scroll gesture on touch devices, which is the single most common reason a drag interaction "works on desktop but not on mobile".

Auto-fit measured properly

Double-clicking a divider fits the column to its widest cell. Doing this by reading scrollWidth fails once text-overflow: ellipsis has clipped the content, because the clipped element reports the clipped size. Instead the snippet creates one hidden probe span, copies each cell's computed font onto it, writes the cell text, and reads offsetWidth — an accurate measurement of the untruncated string. The probe is created once per auto-fit and removed immediately, so no layout thrash is left behind.

Feedback and escape hatches

The note line under the table reports the live pixel width during a drag and the result after an auto-fit, so the interaction is legible rather than guessy. A minimum width constant prevents a column being dragged to nothing and becoming unrecoverable, and the Reset button restores the original widths captured on load, which is the safety net that makes users willing to experiment with the feature at all.