概述
在开发的时候，我们有时候会有这样的需求：由于表格的内容比较多，如果横竖都出现滚动条就看不到表头了，这就要求表格的表头和第一列固定，并且出现双向滚动条。本文就就给大家介绍一种通过css和两行js简单实现。
效果
实现思路
1.区域划分
如下图，将整个表格分为四个区域：1、左上区域需要单独出来，因为此区域不参与滚动；2、上部表头，需要固定在顶部并且参与横向滚动；3、左边表头，需要滚动并且参与竖向滚动；4、表格主区域，会有横竖向的滚动，控制顶部和左边的表头。
2.关键点
table的th或者td里面套一个div并设置宽度，目的是为了撑开table的表格，因为单独给th或者td是不起作用的。
实现代码
@charset "utf-8";
.container {
font-size: 12px;
width: 600px;
overflow: hidden;
.table {
width: 100%;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
th,
td {
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
div {
height: 20px;
line-height: 20px;
width: 60px;
white-space: nowrap;
}
}
}
.table-title,
.table-content {
float: left;
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
&::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: #F9F9F9;
}
/*定义滚动条轨道 内阴影+圆角*/
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
&::-webkit-scrollbar-thumb {
border-radius: 3px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #999;
}
}
.table-title {
width: 60px;
}
.top-title {
width: calc(100% - 66px);
overflow: hidden;
}
.left-title {
max-height: 200px;
overflow: hidden;
}
.table-content {
position: relative;
width: calc(100% - 60px);
max-height: 206px;
overflow: auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--jquery-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--easyui-->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div>
<div class="table-title">
<table class="table" cellpadding="0" cellspacing="0">
<tr><th><div>商品名称</div></th></tr>
</table>
</div>
<div class="table-content top-title" id="topTitle">
<table class="table" cellpadding="0" cellspacing="0">
<tr>
<th><div>属性1</div></th>
<th><div>属性2</div></th>
<th><div>属性3</div></th>
<th><div>属性4</div></th>
<th><div>属性5</div></th>
<th><div>属性6</div></th>
<th><div>属性7</div></th>
<th><div>属性8</div></th>
<th><div>属性9</div></th>
<th><div>属性10</div></th>
<th><div>属性11</div></th>
<th><div>属性12</div></th>
<th><div>属性13</div></th>
<th><div>属性14</div></th>
<th><div>属性15</div></th>
<th><div>属性16</div></th>
<th><div>属性17</div></th>
<th><div>属性18</div></th>
<th><div>属性19</div></th>
<th><div>属性20</div></th>
</tr>
</table>
</div>
</div>
<div>
<div class="table-title left-title" id="leftTitle">
<table class="table" cellpadding="0" cellspacing="0">
<tr><th><div>商品1</div></th></tr>
<tr><th><div>商品2</div></th></tr>
<tr><th><div>商品3</div></th></tr>
<tr><th><div>商品4</div></th></tr>
<tr><th><div>商品5</div></th></tr>
<tr><th><div>商品6</div></th></tr>
<tr><th><div>商品7</div></th></tr>
<tr><th><div>商品8</div></th></tr>
<tr><th><div>商品9</div></th></tr>
<tr><th><div>商品10</div></th></tr>
<tr><th><div>商品11</div></th></tr>
<tr><th><div>商品12</div></th></tr>
<tr><th><div>商品13</div></th></tr>
<tr><th><div>商品14</div></th></tr>
<tr><th><div>商品15</div></th></tr>
</table>
</div>
<div class="table-content" id="content">
<table class="table" cellpadding="0" cellspacing="0">
<tr>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
</tr>
<tr>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
</tr>
<tr>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
</tr>
<tr>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
</tr>
<tr>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
</tr>
<tr>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
</tr>
<tr>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
</tr>
<tr>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
</tr>
<tr>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
</tr>
<tr>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
</tr>
<tr>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
</tr>
<tr>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
</tr>
<tr>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
</tr>
<tr>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
</tr>
<tr>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
<td><div>属性</div></td>
</tr>
</table>
</div>
</div>
</div>
<script>
$("#content").scroll(function() {
$("#topTitle").scrollLeft($("#content").scrollLeft());
$("#leftTitle").scrollTop($("#content").scrollTop());
});
</script>
</body>
</html>
技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
在线教程
https://edu.csdn.net/course/detail/799
https://edu.csdn.net/course/detail/7471
联系方式
| 类型 | 内容 |
|---|---|
| 1004740957 | |
| 公众号 | lzugis15 |
| [email protected] | |
| webgis群 | 452117357 |
| Android群 | 337469080 |
| GIS数据可视化群 | 458292378 |
