目的為了實現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;
width: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-width: 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>
效果圖：
點擊表格中間的位置，表格寬度增加
