Make Table Columns Resizable with jQuery

A light weight and easy to use jQuery plugin to make any HTML table columns resizable. The resizableColumns is a jQuery and CSS based plugin that lets you make resize able columns of tables.

Plugin Overview

Plugin: resizableColumns
Author: Jones Joseph
Licence: MIT Licence
Published: March 22, 2019
Repository: Fork on GitHub
Dependencies: jQuery 3.1.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 8 KB

How to Use Table Columns Resizable with jQuery Plugin:

1. Load the jQuery and resizableColumns javascript and CSS files into your HTML document.


<!-- The plugin jQuery.resizableColumns -->
<script src="js/resizableColumns.min.js"></script>

<!-- Some styles for Table-->
<link rel="stylesheet" href="css/style.css" />

2. Create HTML table with the "resizable" class.

  <table class="resizable">
                    <td class="right">1243</td>
                    <td class="right">1143</td>
                    <td class="right">2386</td>
                    <td class="right">67</td>
                    <td class="right">78</td>
                    <td class="right">145</td>
                    <td>Engoneering Physics</td>
                    <td class="right">76</td>
                    <td class="right">56</td>
                    <td class="right">132</td>
                    <td>Engineering Mathematics</td>
                    <td class="right">76</td>
                    <td class="right">56</td>
                    <td class="right">132</td>

3. Active the plugin by calling it with the selector ".resizable" in jQuery document ready function.

$(document).ready(function() {



Be the first to comment

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.