概述
在开发的时候，我们有时候会有这样的需求：由于表格的内容比较多，如果横竖都出现滚动条就看不到表头了，这就要求表格的表头和第一列固定，并且出现双向滚动条。本文就就给大家介绍一种通过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;
}
}
商品名称
属性1
属性2
属性3
属性4
属性5
属性6
属性7
属性8
属性9
属性10
属性11
属性12
属性13
属性14
属性15
属性16
属性17
属性18
属性19
属性20
商品1 商品2 商品3 商品4 商品5 商品6 商品7 商品8 商品9 商品10 商品11 商品12 商品13 商品14 商品15
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
属性
技术博客
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 |
LZUGIS