JavaScript HTML Table Col Resize

by rajeshpillai

HTML

<!DOCTYPE HTML PUBLIC>
<html>
 <head>
    <title> New Document </title>
    <style>
    table{
        border-collapse:collapse;
    }
    table td, th{
        border:1px solid red;
    }
        
    table th{
        border-right:2px solid blue;
        cursor: pointer;
    }
        
    </style>
 </head>

 <body>
    <table>
     <thead>
        <tr>
         <th>S.No</th>
         <th>Name</th>
         <th>Qualif</th>
        </tr>
     </thead>
     <tbody>
            <tr> <td>1</td><td>Rama Rao</td><td>M.C.A</td></tr>
            <tr> <td>2</td><td>Dushyanth</td><td>B.Tech</td></tr>
            <tr> <td>3</td><td>AnandKumar</td><td>M.C.A</td></tr>
            <tr> <td>4</td><td>Veera Reddy</td><td>B.Tech</td></tr>
     </tbody>
    </table>
    <div id="helper"></div>
 </body>
</html>

JavaScript

$(function(){
        var pressed = false;
        var start = undefined;
        var startX, startWidth;

        $("table th").mousedown(function(e) {

            start = $(this);
            pressed = true;
            startX = e.pageX;
            startWidth = $(this).width();
        });

        $(document).mousemove(function(e) {
            if(pressed) {
                $(start).width(startWidth+(e.pageX-startX));
            }
        });

        $(document).mouseup(function() {
            if(pressed) {
                pressed = false;
            }
        });
    });