关键词：
参考技术A 这次要实现的目标是类似这种，纵向滚动时表头固定，横向滚动时，表头跟着滚动最基础的思路就是表头和内容是用两个表格来显示（图来自 https://zhuanlan.zhihu.com/p/33280304 ），关于怎么保存表头和内容列宽一致链接里这个文章里也有写就不另外说了。
纵向滚动是挺好实现的，我开始是在内容的表格外面套了一个div，之后设置 overflow-y:auto 就实现纵向滚动了。
但横向滚动呢？
首先想到的方案是在最外面的div,outer加上 overflow-x:auto
虽然这样横纵都能滚动了，但是横向滚动的时候纵向滚动条也被滚走了。
然后想到了是用js来同步，可以是可以的，但是还是想挣扎一下。
之后想到了fixed，发现如果表头设置为fixed无论横向滚动还是都会被固定在原地。
最后突然想到一个position的新属性，sticky
设置了 position: sticky ，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果（ https://www.cnblogs.com/s1nker/p/4835079.html ）。
所以最后设置了表头
css:
就成功实现了想要的效果了。
不过sticky的兼容性也是要考虑一下的。
实现固定表头和表列的table组件
前端的table在设置overflow后横向、纵向滚动。但数据比较多时，为了查看方便，希望能在纵向滚动时固定表头，在横向滚动时在左边或右边固定特定表列，这是原生不支持的。目录实际效果设计思路普通表格固定表... 查看详情
table固定表头固定列实现横向纵向滚动
...。所以考虑用div来包裹，然后设置高度超出stroll，因为要实现表头固定，body滚动，所以把thead单独提出来作为一个表格，然后用定位的方式并成一个完整的表格。sticky是position的新属性值，叫黏性定位。它是一个在static和fixed变... 查看详情
css手写一个表头固定(代码片段)
Bootstrap,layui等前端框架里面都对表头固定，表格滚动有实现，偏偏刚入职的公司选择了手动渲染表格，后期又觉得表格数据拉太长想要做表头固定。为了避免对代码改动太大，所以决定手写表头固定主要遇到的个问题就是固定以... 查看详情
实现固定表头和表列的table组件
前端的table在设置overflow后横向、纵向滚动。但数据比较多时，为了查看方便，希望能在纵向滚动时固定表头，在横向滚动时在左边或右边固定特定表列，这是原生不支持的。目录实际效果设计思路普通表格固定表... 查看详情
bootstraptable实现固定悬浮table表头并可以水平滚动
...项目的css框架是bootstrap3，故也可以叫做bootstraptable。需要实现的是：表格头部固定，并且支持水平滚动htmlcode(sourcetable):<tableid="top_fix_table"border="0"cellpadding="4"cellspacing="0"class="tablet 查看详情
纯css3实现文字间歇滚动效果
...数据来展示所有的数据。效果如图：用JavaScript也很容易实现，但是需要操作DOM，可以参考这篇博客。考虑到项目中经常使用Vue，已经很少操作DOM了，所以考虑最好通过CSS来实现，可以通过Vue给模板元素动态绑定class来实现相同的... 查看详情
纯css实现顶部进度条随滚动条滚动
一、效果图二、直接复制粘贴<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatibl 查看详情
纯css使用线性渐变实现滚动进度条
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie 查看详情
水平和竖直滑动条捆绑，表头固定的实现
...分析或者网站查询数据库的操作中，我们不可避免需要在前端页面中展示所有数据。由于版面构建的问题，导致div内容模块大小，不足以容纳所有数据，这时候我们就必须考虑引入页面的水平或者竖直滚动条。这样能够实现在固... 查看详情
很急gridview固定表头和指定列
...鼠标移到GridView某一行时改变该行的背景色方法二GridView实现删除时弹出确认对话框GridView实现自动编号GridView实现自定义时间货币等字符串格式GridView实现用“...”代替超长字符串GridView一般换行与强制换行GridView显示隐藏某一列G... 查看详情
滚动表格固定表头和左边栏
...一个放在左上角的标签，宽高与第一个td相同 当表格滚动的时候固定头部和左边栏的表格也跟着同步滚动（通过获取和设置scrollLeft和scrollTop） 示例代码如下： CSS： .containt{text-align:cent 查看详情
纯css实现轮播图
天天写前端的你，会自己写一个轮播图吗，而且不能用js哦，知道轮播图的原理吗？今天我们要讲的是如何只用css实现轮播图效果，也叫banner，就是我们经常在APP或网站首页顶部看到的一系列图片切换。就像淘宝官网首页那样：... 查看详情
bootstrap实现表头固定
表格在网页的中间参考技术A$(function()setScroll("#divScroll"););functionsetScroll(id)varobj=$(id);$(id+"table:eq(0)th").css("position","relative").css("top","0px").css("background-color","#fdfdfd");//设置相... 查看详情
基础业务：滚动到指定位置导航固定（css实现）
...础业务像轮播、预加载、懒加载，都是使用NPM上的工具来实现，原理和基础还是要有的，就来实现几个项目中常用到的业务。经常见到这样的效果，导航在页面中间，当界面滚动到导航的时候，导航就变成了fixed布局。为了看效... 查看详情
elementui组件表格高度以及表头固定表身滚动方法
1.表格高度：在el-table标签里增加一个类名classA,然后写css样式：.classAth,.classAtdpadding:0!important;height:20px;//需要的高度line-height:20px;2.表头固定，表身超过高度自动滚动直接在el-table标签里增加height:100%就可以了。 查看详情
实现html表头固定，表格内的信息向上滚动
效果如下：<!doctypehtml>Table.table{width:100%;border-collapse:collapse;border-spacing:0}.fixedThead{display:block;width:100%}.scrollTbody{display:block;height:262px;overflow:auto;width:100%}.tabletd 查看详情
table中head表头固定，body滚动
1<styletype="text/css">2.table-head{3background-color:#999;4color:#000;5}6.table-body{7width:100%;8height:300px;9overflow-y:scroll;10}11.table-headtable,12.table-bodytable{13width:100%;14}15tabl 查看详情
前端纯html+css+javascript实现楼层跳跃式的页面布局
实现效果演示：实现代码及注释：<!DOCTYPEhtml><html><head> <title>楼层跳跃式的页面布局</title> <metacharset="utf-8"> <styletype="text/css"> *{ margin:0; padding:0; } body,html{ 查看详情