最近在寫一個帶滾輪的表格，聽起特別簡單，但是操作起來很難，因爲它在一些細節上還有要求，請允許我細細道來。。。
1.頁面佈局
先講一下頁面的佈局，首先有個內容div塊(id=“content”)，裏面包含一個滾動的表格和其他html元素(可自由定義,這裏我沒有寫，畢竟講的是滾動條表格)，裏面的表格再給它套上div塊(result_area)，方便定位。
然後在result_area中是一個鋪滿的完整表格，但是這個表格讓我切割成了四個部分，爲什麼是四部分？這就和我的需求有關係了，先不說，等完成後，再說明。這四個部分id一次爲result_title、result_head、result_items、result_data，我是用position進行定位，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!-- <meta http-equiv="Refresh" content="5;url=http://www.baidu.com">
5s 後跳轉到指定頁面
-->
<title>Document</title>
<meta name="keywords" content="搜索網頁的關鍵字">
<meta name="description" content="網頁的介紹">
<link rel="stylesheet" type="text/css" href="">
<script type="" src="" charset="UTF-8"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#content {
margin: 0 auto;
width: 600px;
height: 500px;
border:1px solid #000;
}
#result_area {
width: 550px;
height: 400px;
border:1px solid #000;
margin: 10px auto;
position: relative;
top: 0px;
left: 0px;
}
#result_title {
border:1px solid #f00;
width: 100px;
height: 50px;
position: absolute;
top: 0px;
left: 0px;
}
#result_head {
border:1px solid #f00;
width: 450px;
height: 50px;
position: absolute;
top: 0px;
left: 100px;
}
#result_items {
border:1px solid #f00;
width: 100px;
height: 350px;
position: absolute;
top: 50px;
left: 0px;
}
#result_data {
border:1px solid #f00;
width: 450px;
height: 350px;
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<div id="content">
<div id="result_area">
<div id="result_title"></div>
<div id="result_head"></div>
<div id="result_items"></div>
<div id="result_data"></div>
</div>
</div>
</body>
</html>
效果如下：
2.顯示錶格
前面說的，我把這個表格分割成了4個部分，這四個部分分別是4個表格(在代碼中查看)，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!-- <meta http-equiv="Refresh" content="5;url=http://www.baidu.com">
5s 後跳轉到指定頁面
-->
<title>Document</title>
<meta name="keywords" content="搜索網頁的關鍵字">
<meta name="description" content="網頁的介紹">
<link rel="stylesheet" type="text/css" href="">
<script type="" src="" charset="UTF-8"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#content {
margin: 0 auto;
width: 600px;
height: 500px;
border:1px solid #000;
}
#result_area {
width: 550px;
height: 400px;
border:1px solid #000;
margin: 10px auto;
position: relative;
top: 0px;
left: 0px;
}
#result_title {
border:2px solid #f00;
width: 100px;
height: 50px;
position: absolute;
top: 0px;
left: 0px;
}
#result_head {
border:2px solid #f00;
width: 450px;
height: 50px;
position: absolute;
top: 0px;
left: 100px;
}
#result_items {
border:2px solid #f00;
width: 100px;
height: 300px;
position: absolute;
top: 50px;
left: 0px;
}
#result_data {
border:2px solid #f00;
width: 450px;
height: 300px;
position: absolute;
top: 50px;
left: 100px;
}
/*
設置表格的寬度，並在下面使用col標籤把每列的寬度規定好，
一般來說不需要規定表格的高度，因爲隨着
數據行的增加，高度是增加的。
但是這裏，t_title、t_head都是列名，不會增加，所以就固定了
*/
#t_title {
height: 50px;
width: 100px;
}
#t_head {
height: 50px;
width: 1000px;
}
#t_items {
width: 100px;
table-layout: fixed;
}
#t_data {
width: 1000px;
table-layout: fixed;
}
table {
text-align: center;
border-collapse: collapse;
}
table tr {
height: 25px;
}
table th,td {
border:1px solid #ff0;
}
</style>
</head>
<body>
<div id="content">
<div id="result_area">
<div id="result_title">
<table id="t_title">
<col width="50">
<col width="50">
<thead>
<tr>
<th>年度排名</th>
<th>歷史排名</th>
</tr>
</thead>
</table>
</div>
<div id="result_head">
<table id="t_head">
<col width="90">
<col width="50">
<col width="40">
<col width="50">
<col width="70">
<col width="50">
<col width="200">
<thead>
<tr>
<th>電影名稱</th>
<th>總票房</th>
<th>上映時間</th>
<th>製片地區</th>
<th>製片成本</th>
<th>片長</th>
<th>主演</th>
</tr>
</thead>
</table>
</div>
<div id="result_items">
<table id="t_items">
<col width="50">
<col width="50">
<tbody>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
</table>
</div>
<div id="result_data">
<table id="t_data">
<col width="100">
<col width="50">
<col width="40">
<col width="50">
<col width="70">
<col width="50">
<col width="200">
<tbody>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr><tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
具體效果如下：
仔細觀察，這裏，右上、右下、左下的表格的寬度或高度超過了紅色邊框，也就是說，我的目的是讓表格僅僅顯示在紅色邊框內(div塊)，所以，分別給他們所在的div塊加上overflow屬性，加上滾動條。即id分別爲result_head、result_items、result_data的div塊，效果如下：
把上圖和上上圖進行比較，你會發現一個問題，比如，左下塊的表格原本寬度並沒有超出塊，但是居然給加了個滾動條，原因很簡單，就是當高度超出後，在側面加個滾動條，但是這個滾動條是加在div塊內的，滾動條佔據了一定寬度，這樣就把原來裏面的表格在寬度上擠了一下，導入塊裏容不下這個表格，所以在底部也加上了滾動條。
3.表格與表格關聯聯動
經過我的測試，滾動條的寬度大概在16px，所以，到了這一步，我其實應該把那些不應該存在的滾動條給去掉，如左下表格底部滾動條、右上表格側面滾動條都應該去掉，但是，如果去掉的話，就得調整他們各自div的寬度(額外加上16px或以上)，這樣做其實不好，後期表格同步時，也會有麻煩。
呀呀，現在，可以說需求了，我的需求就是僅僅保留右下表格的滾動條，然後上下滾動時，右上表格(即列名)不會跟隨移動，這樣你看哪個數據時，都會明顯看出他是哪一列的(這裏我通過分割表格已經實現了)，左下的表格會跟着上下移動(這裏由於隸屬兩個表格，所以得做關聯才能讓他們同步，接下來實現)，畢竟他們是一行的數據；而滾動條左右滾動時，右上的表格(即列名)跟隨移動(這裏由於隸屬兩個表格，所以得做關聯才能讓他們同步，接下來實現)。
那麼，我現在把左下和右上的滾動條取消掉，將overflow屬性改爲hidden。效果如下：
現在看來一切都那麼接近需求了，顯示正常，現在唯一要做的就是如何通過右下這個表格的滾動條帶動其他兩個表格滾動呢？如何實現這兩個？其實，實現這兩個功能僅僅用html+css是不夠的，得使用js，不要害怕，js就兩行代碼，就是獲取兩個滾動條的對象，然後賦值給另外兩個滾動條的對象，已達到實時監控同步的效果。很短的代碼，保證你能看懂,代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!-- <meta http-equiv="Refresh" content="5;url=http://www.baidu.com">
5s 後跳轉到指定頁面
-->
<title>Document</title>
<meta name="keywords" content="搜索網頁的關鍵字">
<meta name="description" content="網頁的介紹">
<link rel="stylesheet" type="text/css" href="">
<script type="" src="" charset="UTF-8"></script>
<script type="text/javascript">
function aa() {
var a = document.getElementById("result_data").scrollTop;
var b = document.getElementById("result_data").scrollLeft;
document.getElementById("result_items").scrollTop = a;
document.getElementById("result_head").scrollLeft = b;
};
// 看上面的代碼，很好明白，就是獲取右下表格的底部和側面兩個滾動條對象，
// 然後將底部滾動條對象賦給需要左右同步的對象 ，
// 然後將側面滾動條對象賦給需要上下同步的對象
</script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#content {
margin: 0 auto;
width: 600px;
height: 500px;
border:1px solid #000;
}
#result_area {
width: 550px;
height: 400px;
border:1px solid #000;
margin: 10px auto;
position: relative;
top: 0px;
left: 0px;
}
#result_title {
border:1px solid #f00;
width: 100px;
height: 50px;
position: absolute;
top: 0px;
left: 0px;
}
#result_head {
border:1px solid #f00;
width: 450px;
height: 50px;
position: absolute;
top: 0px;
left: 100px;
overflow: hidden;
}
#result_items {
border:1px solid #f00;
width: 100px;
height: 300px;
position: absolute;
top: 50px;
left: 0px;
overflow: hidden;
}
#result_data {
border:1px solid #f00;
width: 450px;
height: 300px;
position: absolute;
top: 50px;
left: 100px;
overflow: auto;
}
/*
設置表格的寬度，並在下面使用col標籤把每列的寬度規定好，
一般來說不需要規定表格的高度，因爲隨着
數據行的增加，高度是增加的。
但是這裏，t_title、t_head都是列名，不會增加，所以就固定了
*/
#t_title {
height: 50px;
width: 100px;
}
#t_head {
height: 50px;
width: 1000px;
}
#t_items {
width: 100px;
table-layout: fixed;
}
#t_data {
width: 1000px;
table-layout: fixed;
}
table {
text-align: center;
border-collapse: collapse;
}
table tr {
height: 25px;
}
table th,td {
border:1px solid #ff0;
}
</style>
</head>
<body>
<div id="content">
<div id="result_area">
<div id="result_title">
<table id="t_title">
<col width="50">
<col width="50">
<thead>
<tr>
<th>年度排名</th>
<th>歷史排名</th>
</tr>
</thead>
</table>
</div>
<div id="result_head">
<table id="t_head">
<col width="90">
<col width="50">
<col width="40">
<col width="50">
<col width="70">
<col width="50">
<col width="200">
<thead>
<tr>
<th>電影名稱</th>
<th>總票房</th>
<th>上映時間</th>
<th>製片地區</th>
<th>製片成本</th>
<th>片長</th>
<th>主演</th>
</tr>
</thead>
</table>
</div>
<div id="result_items">
<table id="t_items">
<col width="50">
<col width="50">
<tbody>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
</table>
</div>
<div id="result_data" onscroll="aa()">
<table id="t_data">
<col width="90">
<col width="50">
<col width="40">
<col width="50">
<col width="70">
<col width="50">
<col width="200">
<tbody>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr><tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
<tr>
<td>紅海行動</td>
<td>36.22億</td>
<td>2018</td>
<td>中國大陸</td>
<td>5億元人民幣</td>
<td>138分鐘</td>
<td>張譯、黃景瑜，海清，杜江，蔣璐霞</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
效果如下：
4.尺寸調整(最終完成)
看上面兩個圖片，會存在一個問題，一開始隨着滾動條的移動，其他兩個表格是同步的，但是到最後不同步了，線條對不到一塊去了。究其原因，是因爲有滾動條的右下表格有滾動條的佔據，佔用了div塊，無形的使顯示窗口變窄了，所以需要移動更多的滾動條才能顯示完全，直白點說，就是當右上的表格移動到尾部後，右下表格還沒移動完，右下表就得移動導致上下表格錯開了，所以需要調整右上、左下div的寬度或高度，即將右上表格對應div的寬度減去一個滾動條的寬度；左下表格對應的div高度減去一個滾動條的寬度(16px)。完成，最後把不該顯示的線條去掉，該顯示的顯示。效果如下：
但是又出來了一個問題，就是在使用底部滾輪時，上圖中那個線條消失了，他只在頭部、尾部纔出現，經過測試，2019.08.13