jquery实现td控制显示宽度

目的为了实现td表格元素出现省略的情况，然后点击中间位置是td的宽度增加。
实现代码如下，采用css+jquery的实现方式：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    div{
        border: 1px solid #000000;
        position: absolute;
        800px;
        height: 300px;
        overflow: scroll;
    }
    table{
        border: 1px double #000000;
        /*消除表格之间的间距*/
        border-collapse: collapse;

    }

    td{
        border-top: 1px double #000000;
        border-right: 1px double #000000;
        /*text-align: center;*/
        /*必须存在最大的宽度否则td里的信息不会缩略显示*/
        max- 50px;
        /*规定段落中的文本不进行换行*/
        white-space: nowrap;
        /*内容过多的隐藏*/
        overflow: hidden;
        /*溢出的文字显示为省略号*/
        text-overflow: ellipsis;
        /*消除表格之间的间距*/
        /*border-collapse: collapse;*/
        background: linear-gradient(#cafce7,#ffffff);
        background:-moz-linear-gradient(top,#cafce7,#ffffff);
        background:-webkit-linear-gradient(top,#cafce7,#ffffff);
    }
</style>
<script src="js/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

//    var colors=["red","rosybrown","rebeccapurple","black","blue"]
//    $(function () {
//
//
//
//        function  addDiv(color) {
//            for(var i=0;i<3;i++){
//
//                $("body").append($("<div id="l"+i+"""+"></div>").css({"margin-left":200+i*30,"margin-top":100-i*10,"background-color":color[i],"z-index":7-i,"width":50-i*10,"height":80-i*16}));
//                $("body").append($("<div id="r"+i+"""+"></div>").css({"margin-left":200-i*30,"margin-top":100-i*10,"background-color":color[color.length-i],"z-index":7-i,"width":50-i*10,"height":80-i*16}));
//            }
//        }
//        function  selColor() {
//            var tcolors=new Array();
//            var j=0;
//            for(var i=0;i<colors.length;i++){
//                j=i+1;
//                if(j==colors.length){
//                    tcolors[i]=colors[0];
//                }else{
//                tcolors[i]=colors[j];
//                }
//            }
//            colors=tcolors;
//            addDiv(tcolors);
//        }
//        $("body").append($("<button>Next</button>").bind("click",function () {
//            selColor();
//        }));
//
//    });

    $(function () {
//        鼠标的点击事件
        $("td").mousedown(function(e) {
            //$(this).offset().left元素相对body容器的绝对定位的位置
            //元素绝对的margin-left位置
            var tleft=$(this).offset().left;
            //鼠标的点击位置
            var epagex=e.pageX;
            //点击元素的宽度
            var twidth=$(this).width();
            //获取元素x坐标的结束位置
            var total=tleft+twidth;
            //将触发事件压缩到一个局部的位置
            if(total-20<epagex){
                //将鼠标设置为左右拉伸
                $(this).css("cursor","e-resize");
                //列的长度每次点击添加50px
                $(this).css("width",twidth+50);
                $(this).css("max-width",twidth+50);
                //添加上这一句就可以无限增加td列的长度
                $("table").css("width",$("table").width()+50);
            }else {
                //将鼠标还原到小箭头
                $(this).css("cursor","default");
            }
        });


    });

</script>

<body>

<table>
    <tr>
        <td>12132342432435435</td>
        <td>dsfsfsdfds</td>

    </tr>

    <tr>
        <td>12132342432435435</td>
        <td>dsfsfsdfds</td>
    </tr>

</table>

</body>
</html>
效果图：
点击表格中间的位置，表格宽度增加