Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » HTML-CSS-PHP-JavaScript / JavaScript Codes » How To Make Resizable Columns Of Your HTML Table Using JavaScript?

How To Make Resizable Columns Of Your HTML Table Using JavaScript?

A lightweight and easy to use vanilla javascript to make any HTML table columns resizable. The resizable columns is a jquery and CSS based plugin that lets you make resizeable columns of tables.

How we can create a flexible table in which columns are resizable? Solution: See this Resizable Table column With Drag and Slide Feature, Drag to Resize. In this tutorial, we’ll learn how to make HTML table columns resizable using pure JavaScript., The following code will select all tables and pass them to the resizable grid function.

There are many code snippets available online or on many other blogs and websites but everyone is not able to optimize your blog or website so you need some optimized code snippet. So now checkout out the code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.


  1. Light Weight.
  2. Pure Vanilla JavaScript.
  3. Cross Browser.
  4. Responsive.
  5. Min Limit Set To Content Width.
  6. Max Width Set To Screen View.
Recommended For You:
Flip An Image Through Pure CSS3 In Cross Browsers

How To Make Resizable Columns Of Your HTML Table Using JavaScript?

There are a few easy and understandable steps to achieve your desired functionality using pure Vanilla JavaScript that we are gonna share below. Follow each step perfectly.


.table {
border-collapse: collapse;
.table th,
.table td {
border: 1px solid #ccc;
.table th,
.table td {
padding: 0.5rem;
.table th {
position: relative;
.resizer {
position: absolute;
top: 0;
right: 0;
width: 5px;
cursor: col-resize;
user-select: none;
.resizing {
border-right: 2px solid blue;

.resizable {
border: 1px solid gray;
height: 100px;
width: 100px;
position: relative;


<table id="resizeMe" class="table">
<th>First name</th>
<th>Last name</th>


document.addEventListener('DOMContentLoaded', function () {
const createResizableTable = function (table) {
const cols = table.querySelectorAll('th');
[], function (col) {
// Add a resizer element to the column
const resizer = document.createElement('div');

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


createResizableColumn(col, resizer);

const createResizableColumn = function (col, resizer) {
let x = 0;
let w = 0;

const mouseDownHandler = function (e) {
x = e.clientX;

const styles = window.getComputedStyle(col);
w = parseInt(styles.width, 10);

document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);


const mouseMoveHandler = function (e) {
const dx = e.clientX - x; = `${w + dx}px`;

const mouseUpHandler = function () {
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);

resizer.addEventListener('mousedown', mouseDownHandler);



No need to customize it. Just copy-paste. Rest edit the code as per comments and need.

Troubleshooting the Errors

Do it with concentration and patience. Check your alls steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.

Final Words:

That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us or If you have any doubts and problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy development, See you in the next article.

Recommended For You:
Show Sub-Menu On Hover With Main-Menu Overflow Hidden

You Like It, Please Share This Recipe With Your Friends Using...

4 Responses to “How To Make Resizable Columns Of Your HTML Table Using JavaScript?”

  1. Aadhil Ahamed says:

    Thanks for the article. It’s very useful, and it let ease of the work. Thank a lot. I am from Sri Lanka.

    • EXEIdeas says:

      Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again.

  2. aakash chauhan says:

    It’s not working for me….

Leave a Reply

Your email address will not be published. Required fields are marked *