html调整列宽table，设计表头固定并且列宽可调整的Table表格table表头固定以及列宽可调
th {
width: 200px;
border-bottom: 1px solid #ddd;
html网页设计 table }
td {
width: 200px;
border-bottom: 1px solid #ddd;
}
.table-col-resize {
cursor: col-resize;
}
.col-div {
text-overflow: ellipsis !important;
overflow: hidden;
white-space: nowrap;
width: 197px;
}
.col-scaleplate {
position: absolute;
width: 4px;
height: 100%;
background-color: rgb(171, 171, 171);
top: 0;
left: -66px;
}
.no-select {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
Col4|
Col3|Col4
Col1
Col1|Col2
Col2|Col3
{{unit}}
var myApp = dule('app', []).controller('tableController', function($scope) { // 清除⽂本选中状态
var clearTxtSelect= "getSelection" in window ? function(){
} : function(){
pty();
};
// 构建表格数据
var words = ['a','b','c','d','e','f','是','啥','将','⽉','天','明','r','l','e','⼀','双','⼈','将'];
$scope.datas = [];
for (var i = 0; i < 20; i++) {
var row = [];
for (var j = 0; j < 4; j++) {
var unit = words[parseInt(Math.random() * words.length)];
for (var k = 0; k < parseInt(Math.random() * 80); k++) {
unit += words[parseInt(Math.random() * words.length)];
}
row.push(unit);
}
$scope.datas.push(row);
}
// 调整列宽
var i = -1;
$('th').each(function() {
$('.table-col-resize').eq(++i).bind('mousedown', {colNum: i}, function(e) {
var $thDom = $(e.currentTarget).parent('th');
$iginalPos = e.pageX;
$('.col-scaleplate').css('left', e.pageX - 8 + 'px');
// 当前第⼏列 (从0开始)
$scope.currentColNum = lNum;
// 为body添加mousemove绑定
$('body').bind('mousemove', function(e) {
clearTxtSelect();
$('.col-scaleplate').css('left', e.pageX - 8 + 'px');
});
// 为body添加mouseup绑定
$('body').bind('mouseup', function(e) {
$('.col-scaleplate').css('left', '-40px'); // 将标尺div移出视线
$scope.targetPos = e.pageX;
// 取消body的mousemove和mouseup绑定
jQuery(this).unbind('mousemove').unbind('mouseup');
// 计算⿏标移动的距离
console.log($scope.targetPos - $iginalPos); //TODO del
var distance = $scope.targetPos - $iginalPos;
// 设置两个table的列宽
$thDom.width($thDom.width() + distance);
$('tr').each(function() {
var $tdDom = $(this).find('td').eq($scope.currentColNum).find('>div'); $tdDom.width($tdDom.width() + distance);
});
// 设置两个表格的总宽度
$('.first-table').width($('.first-table').width() + distance);
$('.second-table').width($('.second-table').width() + distance); clearTxtSelect();
});
});
});
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。