html+css实现表格上下左右双滚轮同步(全网最简单)
作者：互联网
最近在写一个带滚轮的表格，听起特别简单，但是操作起来很难，因为它在一些细节上还有要求，请允许我细细道来。。。
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的宽度，这样做其实不好，后期表格同步时，也会有麻烦。
呀呀，现在，可以说需求了，我的需求就是仅仅保留右下表格的滚动条，然后上下滚动时，右上表格(即列名)不会跟随移动，这样你看哪个数据时，都会明显看出他是哪一列的(这里我通过分割表格已经实现了)，左下的表格会跟着上下移动(这里由于隶属两个表格，所以得做关联才能让他们同步，接下来实现)，毕竟他们是一行的数据；而滚动条左右滚动时，右上的表格(即列名)跟随移动(这里由于隶属两个表格，所以得做关联才能让他们同步，接下来实现)。
那么，我现在把左下和右上的滚动条取消掉，将overflow属性改为hidden。效果如下：
现在看来一切都那么接近需求了，显示正常，现在唯一要做的就是如果通过右下这个表格的滚动条带动其他两个表格滚动呢？如何实现这两个？其实，实现这两个功能仅仅用html+css是不够的，得使用js，不要害怕，js就两行代码，保证你能看懂,代码如下：
在这里插入代码片
标签：黄景,36.22,表格,html,result,138,上下左右,css,2018 来源： https://blog.csdn.net/qq_36923376/article/details/99303458