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=www.baidu">
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;
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=www.baidu">
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;
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>
<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>
<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>
css设置表格滚动条<td>36.22亿</td>
<td>2018</td>

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