<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table {
table-layout: fixed;
/*使用fixed實現th固定寬度*/
width: 100%;
/*在使用fixed的時候，必須指定width，否則還是自適應寬度*/
border-spacing: 0;
}
th {
background: #888;
}
th,
td {
border: 1px solid #333;
/*一定要同時有border和outline不然滾動會看着不協調*/
outline: 1px solid #333;
background: #fff;
}
</style>
<script>
window.onload = function () {
//這是外層div
var tableDiv = document.querySelector("#tableDiv");
//這是水平可滾動距離
var diff = tableDiv.scrollWidth - tableDiv.clientWidth;
console.log(diff);
//獲取最后一列單元格，在這個例子里，最后一列是第5列
var opts = tableDiv.querySelectorAll("tr td:nth-child(5),tr th:nth-child(5)");
console.log(opts);
//獲取前兩列單元格
var names = tableDiv.querySelectorAll("tr td:nth-child(1),tr th:nth-child(1),tr td:nth-child(2),tr th:nth-child(2)");
console.log(names);
//如果水平有滾動條，那一開始就需要讓最后一列偏移
if (diff > 0) {
for (var i = 0; i < opts.length; i++) {
opts[i].style.transform = "translateX(-" + diff + "px)";
console.log(opts[i].style.transform)
}
}
/*******固定的邏輯基本就下面這些*********/
var scroll_x = 0;
var scroll_y = 0;
tableDiv.addEventListener("scroll", function (e) {
//垂直滾動固定頭
if (this.scrollTop != scroll_y) {
scroll_y = this.scrollTop;
this.querySelector("thead").style.transform = "translate3d(0," + this.scrollTop + "px,.1px)";
}
//水平滾動固定前兩列和最后一列
if (this.scrollLeft != scroll_x) {
scroll_x = this.scrollLeft;
for (var i = 0; i < opts.length; i++) {
opts[i].style.transform = "translateX(-" + (diff - scroll_x) + "px)";
}
for (var i = 0; i < names.length; i++) {
names[i].style.transform = "translateX(" + scroll_x + "px)";
}
}
})
}
</script>
</head>
<body>
<div id="tableDiv" style="width:500px; height:400px;overflow:auto;margin:0 auto;margin-top:50px;">
<!-- table必須加transform這個樣式，否則垂直滾動的時候，會有問題 -->
<table style="transform-style:preserve-3d;">
<thead>
<tr>
<th style="width:50px">Num</th>
<th style="width:120px">Name</th>
<th style="width:100px">Age</th>
<th style="width:300px">Address</th>
<th style="width:50px">Opt</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>張三</td>
<td>10</td>
<td>這是一條很長很長很長很長很長很長很長很長的文字</td>
<td>
<a href="">編輯</a>
</td>
</tr>
<tr>
<td>2</td>
<td>張三1</td>
<td>10</td>
<td>這是一條很長很長很長很長很長很長很長很長的文字</td>
<td>
<a href="">編輯</a>
</td>
</tr>
<tr>
<td>3</td>
<td>張三3</td>
<td>10</td>
<td>這是一條很長很長很長很長很長很長很長很長的文字</td>
<td>
<a href="">編輯</a>
</td>
</tr>
<tr>
<td>4</td>
<td>張三4</td>
<td>10</td>
<td>這是一條很長很長很長很長很長很長很長很長的文字</td>
<td>
<a href="">編輯</a>
</td>
</tr>
<tr>
<td>5</td>
<td>張三5</td>
<td>10</td>
<td>這是一條很長很長很長很長很長很長很長很長的文字</td>
<td>
<a href="">編輯</a>
</td>
</tr>
<tr>
<td>6</td>
<td>張三6</td>
<td>10</td>
<td>這是一條很長很長很長很長很長很長很長很長的文字</td>
<td>
<a href="">編輯</a>
</td>
</tr>
<tr>
<td>7</td>
<td>張三7</td>
<td>10</td>
<td>這是一條很長很長很長很長很長很長很長很長的文字</td>
<td>
<a href="">編輯</a>
</td>
</tr>
<tr>
<td>8</td>
<td>張三8</td>
<td>10</td>
<td>這是一條很長很長很長很長很長很長很長很長的文字</td>
<td>
<a href="">編輯</a>
</td>
</tr>
<tr>
<td>9</td>
<td>張三9</td>
<td>10</td>
<td>這是一條很長很長很長很長很長很長很長很長的文字</td>
<td>
<a href="">編輯</a>
</td>
</tr>
<tr>
<td>10</td>
<td>張三10</td>
<td>10</td>
<td>這是一條很長很長很長很長很長很長很長很長的文字</td>
<td>
<a href="">編輯</a>
</td>
</tr>
<tr>
<td>11</td>
<td>張三11</td>
<td>10</td>
<td>這是一條很長很長很長很長很長很長很長很長的文字</td>
<td>
<a href="">編輯</a>
</td>
</tr>
<tr>
<td>12</td>
<td>張三12</td>
<td>10</td>
<td>這是一條很長很長很長很長很長很長很長很長的文字</td>
<td>
<a href="">編輯</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
