Accessible, Resizable Table-Columns

I love using the <input type="range">. It's an interactive control with touch-support, and you get accessibility baked-in for free!

After I finished the Accessible Image Compare a while ago, I thought about other use-cases.

One obvious candidate is resizable table columns. You'll find plenty of examples and libraries out there but they often lack accessibility. None of the ones I found supported resizing with arrow-keys (they must be out there, I just couldn't find any).

This is a bit more complex than the Accessible Image Compare; you need an <input type="range"> for all columns except the last.

Without styling, it looks like this:

Each <input type="range"> will update two custom properties, holding the widths of the cells to the left and the right of the input.

In CSS, we need to stack them all on top, using position: absolute, the range-height must be set to the lowest value possible (1px), while the draggable thumb must be the full height of the table. This is to avoid "collisions" between the ranges.

It now looks like this:

The draggable thumb should be invisible, so we'll set that to transparent, and the cursor should change to ew-resize when hovering:

Then, when using keyboard-navigation, :focus-visible is used to show the thumb, styled like this:

And because it's <input type="range">, you can use arrow-keys to de/increase the column widths! The widths are stored as CSS Custom Properties on the table:

--c0:23; --c1:26; --c2:25; --c3:26;

These are then used on the thead th-cells:

<th style="width: calc(1% * var(--c0));">ID</th>

I've made a JavaScript, you can add to any table but beware(!) : Styling for Firefox is yet to be done, and I haven't used it in production (yet).

You'll also need the [data-table-]-styles; grab both CSS and JS from this Pen:

Thanks for reading!