目的为了实现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>
效果图：
点击表格中间的位置，表格宽度增加
