← Back toHTML DOM

Resize columns of a table

Written byPhuoc Nguyen
05 Mar, 2020
Last updated
07 May, 2021
Level 3 — Advanced
Assume that we want to resize any column of the following table:
<table id="resizeMe" class="table">

Prepare the resizer

For each column, we insert a `div` element indicating that the associated column can be resized. The resizer element is positioned absolutely inside the column. The CSS styles for them would be as below:
.table th {
position: relative;
.resizer {
/* Displayed at the right side of column */
position: absolute;
top: 0;
right: 0;
width: 5px;
cursor: col-resize;
user-select: none;
To create resizers and append them to columns, we have to query and loop over all columns:
// Query the table
const table = document.getElementById('resizeMe');

// Query all headers
const cols = table.querySelectorAll('th');

// Loop over them
[].forEach.call(cols, function (col) {
// Create a resizer element
const resizer = document.createElement('div');

// Set the height
resizer.style.height = `${table.offsetHeight}px`;

// Add a resizer element to the column

// Will be implemented in the next section
createResizableColumn(col, resizer);

Handle the resizer's events

We are going to implement a function, `createResizableColumn`, which accepts two parameters:
  • `col` that represents the table header
  • `resizer` that represents the resizer element within the column
In order to allow user to resize `col`, we have to handle three events:
  • `mousedown` on the resizer: Track the current position of mouse
  • `mousemove` on `document`: Calculate how far the mouse has been moved, and adjust the width of the column
  • `mouseup` on `document`: Remove the event handlers of `document`
const createResizableColumn = function (col, resizer) {
// Track the current position of mouse
let x = 0;
let w = 0;

const mouseDownHandler = function (e) {
// Get the current mouse position
x = e.clientX;

// Calculate the current width of column
const styles = window.getComputedStyle(col);
w = parseInt(styles.width, 10);

// Attach listeners for document's events
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);

const mouseMoveHandler = function (e) {
// Determine how far the mouse has been moved
const dx = e.clientX - x;

// Update the width of column
col.style.width = `${w + dx}px`;

// When user releases the mouse, remove the existing event listeners
const mouseUpHandler = function () {
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);

resizer.addEventListener('mousedown', mouseDownHandler);

Highlight the resizer

We can improve the user experience a little bit. When user hovers or clicks on the resizer, it can be hightlighted. To demonstrate the idea in the most simple way, we add a solid border to the `:hover` selector:
.resizing {
border-right: 2px solid blue;
The `resizing` class is added to the resizer while user clicks and drags the resizer:
const mouseDownHandler = function(e) {

const mouseUpHandler = function() {


See also

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.
While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.
Ask me questions

Recent posts ⚡

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn