添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
border-top: 1px solid #4078b7; border-bottom: 1px solid #4078b7; background-color: #eef1f6; position: absolute; top: 0; right: 0; .fixed-table_header { display: flex; height: 30px; line-height: 30px; width: 800px; flex-shrink: 0; overflow: hidden; .fixed-table_header_th { display: flex; flex-grow: 1; border-top: 1px solid #4078b7; border-bottom: 1px solid #4078b7; background-color: #eef1f6; width: 120px; padding-left: 10px; flex-shrink: 0; .column-scrollbar { width: 10px !important; .fixed-table_body { display: flex; flex-direction: column; max-height: 197px; width: 800px; overflow: auto; .fixed-table-left_body,.fixed-table-right_body { max-height: 180px; .fixed-table_body_tr { display: flex; height: 30px; line-height: 30px; flex-shrink: 0; .fixed-table_body_td { display: flex; flex-grow: 0; height: 30px; line-height: 30px; border-bottom: 1px solid #4078b7; width: 120px; flex-shrink: 0; padding-left: 10px; .column-address { width: 240px;
日期
姓名
省份
市区
地址
邮编
操作
2016-05-03
王小虎
上海
普陀区
上海市普陀区金沙江路 1518 路
200333
2016-05-03
王小虎
上海
普陀区
上海市普陀区金沙江路 1518 路
200333
2016-05-03
王小虎
上海
普陀区
上海市普陀区金沙江路 1518 路
200333
2016-05-03
王小虎
上海
普陀区
上海市普陀区金沙江路 1518 路
200333
2016-05-03
王小虎
上海
普陀区
上海市普陀区金沙江路 1518 路
200333
2016-05-03
王小虎
上海
普陀区
上海市普陀区金沙江路 1518 路
200333
2016-05-03
王小虎
上海
普陀区
上海市普陀区金沙江路 1518 路
200333
2016-05-03
王小虎
上海
普陀区
上海市普陀区金沙江路 1518 路
200333
日期
2016-05-03
2016-05-04
2016-05-05
2016-05-06
2016-05-07
2016-05-08
2016-05-09
2016-05-10
操作

首先,冻结列是将要冻结的列单独做成一个table然后覆盖在原来的table上。

然后,同步滚动则就是通过οnscrοll="scroll(event)"方法,读取横向和纵向滚动距离,然后赋给表头和冻结列即可。

用div css写的table表格怎么实现冻结某列,同时实现数据滚动条滚动的时候,表头也跟着滚动呢?效果图:代码:&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; .fixed-table-box { disp... $(function () { $(".fixTable").tableHeadFixer({ "left": 0 }); $(".fixTable").tableHeadFixer({ "top": 1 }); [removed] * table - 要锁定的 表格 元素或者 表格 ID * freezeRowNum - 要锁定的前几行行数,如果行不锁定,则设置为0 * freezeColumnNum - 要锁定的前几 数,如果 不锁定,则设置为0 * width - 表格 滚动 区域宽度 * height - 表格 滚动 区域 var box = document.getElementById('box') // 获取id为box的元素 box.onscroll = function() { // box的 滚动条 滚动 时触发 滚动条 的属性 // 垂直 滚动条 box.scrollHeight // 可 滚动 的高度 box.... 客户要求实现对 表格 数据的头几行或者头几 进行 冻结 ,即 滚动 时保持这几行/ 不动,通过网上查找代码,参考已有的代码的思路,实现了可以任意对行、 进行 冻结 。 实现原理: 创建多个div,div之间通过css实现层叠,每个div放置当前 表格 的克隆。例如:需要行 冻结 时,创建存放 冻结 表格 的div,通过设置z-index属性和position属性,让 冻结 表格 在数据 表格 的上层。同理,需要 冻结 时,创建... 思路:当table在父容器中滑动 滚动条 显示内容时,使用scrollTop判断边界,同时使用JQuery中的clone方法,把原table创建复制一份,插入到动态创建的一个div中,再将该div的position设置为fixed,height设置table中的thread的高度即可。 <!DOCTYPE html> <html lang="en"> <meta charset="UTF-8">
大V平时对这方面内容掌握的比较少,显得孤陋寡闻了,今天才遇到,不过遇到了就积累至此,大家切勿冲动:D 注意到我的页面上右下角有一个很可爱的Windows Live Messenger的Web聊天的层,随着页面 滚动条 滚动 ,它始终还呆在原地,它的制作方法在这篇文章中《博客中加WindowsLiveMessenger的方法》有一些简要的介绍。 这里稍微总结一下,那就是利用JavaScript脚本,...