在大神的基础上修改的，主要实现一下两点
1.自由拉伸表格
2.拉伸的同时控制文字的显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 100%;
height: 100%;
}
table {
width: 100%;
height: 300px;
}
tr {}
tr:nth-of-type(odd) {
background-color: #fff;
}
tr:nth-of-type(even) {
background-color: #EDF6FA;
}
th {
height: 40px;
background-color: #fff;
text-align: center;
padding: 0;
line-height: 40px;
color: #708BB3;
font-size: 14px;
border-right: 2px solid #E6EDEB;
vertical-align: middle;
}
th:last-child {
width: 159px;
border-right: none;
}
td {
height: 40px;
line-height: 40px;
text-align: center;
color: #5C7191;
font-size: 12px;
border-right: 2px solid #E6EDEB;
padding: 0;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td:nth-child(1) {
width: 87px !important;
}
td:last-child {
width: 159px !important;
cursor: pointer;
border-right: none;
}
.tableDetail:hover {
text-decoration: none;
}
.tableDetail:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 13px;
height: 15px;
margin-right: 4px;
background: url(../../img/customer/eye.png) no-repeat;
background-size: 100%;
}
.tableDetail {
display: block;
margin: auto;
width: 60px;
height: 26px;
background: rgba(72, 158, 255, 1);
border: 1px solid rgba(69, 151, 245, 1);
box-shadow: 0px 1px 2px 0px rgba(120, 135, 142, 0.2);
border-radius: 2px;
color: #fff !important;
font-size: 12px;
text-align: center;
line-height: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<th>語文</th>
<th>数学</th>
<th>英语</th>
<th>历史</th>
<th>地理</th>
<th>化学</th>
<th>生物</th>
<th>物理</th>
<th>政治</th>
<th>疯子</th>
</tr>
<tr>
<td title="111111111111111111111111111">1111111111111111111111111111111111111111</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td title="111111111111111111111111111">1111111111111111111111111111111111111111</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td title="111111111111111111111111111">1111111111111111111111111111111111111111</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td title="111111111111111111111111111">1111111111111111111111111111111111111111</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td title="111111111111111111111111111">1111111111111111111111111111111111111111</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</div>
<script src="assets/jquery-3.1.1.js"></script>
<script>
let table =document.getElementsByTagName("table")[0];
let rows = table.rows[0];
let flag = false;
var that;
// 遍历
document.onselectstart = new Function("return false");
for (j = 0; j < rows.cells.length; j++) {
$(rows.cells[j]).unbind("mousemove");
$(rows.cells[j]).mousemove(function (e) {
if (this.offsetWidth - 20 <= e.offsetX && e.offsetX <= this.offsetWidth) {
this.style.cursor = "col-resize";
// $(this).bind("mousedown");
} else {
// flag = false;
this.style.cursor = "default";
}
if (that == undefined) {
that = this;
}
if (flag) {
that.style.cursor = 'default';
if (that.oldWidth + (event.x - that.oldX) > 0) {
that.width = that.oldWidth + (event.x - that.oldX);
}
//调整列宽
that.style.width = that.width;
that.style.cursor = 'col-resize';
//调整该列中的每个Cell
table = that;
while (table.tagName != 'TABLE') table = table.parentElement;
for (j = 0; j < table.rows.length; j++) {
table.rows[j].cells[that.cellIndex].width = that.width;
}
// 表格中的文字随着表格的伸缩而显示隐藏
var tdWidth = that.width;
var tdIndex = that.cellIndex;
for (let v of table.rows) {
var tdTitle = v.cells[tdIndex].title;
if (tdTitle) {
$(v.cells[tdIndex]).html("<div style='width:" + tdWidth + "px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;'>" + tdTitle + "</div>");
}
}
//调整整个表
// table.width = that.tableWidth + (that.offsetWidth - that.oldWidth);
// table.style.width = table.width;
}
})
$(rows.cells[j]).unbind("mousedown");
$(rows.cells[j]).mousedown(function () {
that = this;
flag = true;
// if (event.offsetX > that.offsetWidth - 10) {
that.oldX = event.x;
that.oldWidth = that.offsetWidth;
$(that).bind("mousemove");
// }
//记录Table宽度
// table = that;
// while (table.tagName != 'TABLE') {
// table = table.parentElement
// };
// that.tableWidth = table.offsetWidth;
})
$(rows.cells[j]).unbind("mouseup");
$(rows.cells[j]).mouseup(function () {
if (that == undefined) {
that = this;
}
flag = false;
})
// 非表头的地方点击更改flag值
$(rows).siblings().unbind("mouseup");
$(rows).siblings().mouseup(function(){
flag = false;
})
}
</script>
</body>
</html>