固定table的表头同时固定列
table表格是我们最常使用的数据显示一种形式，但有时候数据比较多的时候 就需要我们去固定表头，固定列。我这里用简单的css样式配合两句js脚本来实现，希望能够去帮到你。
<div class="tableContainer">
<div class="sideTable">
<span>产品小类</span>
<div id="sideTable">
<table>
<tr><td>奥瑞奥瑞</td></tr>
<tr><td>奥瑞</td></tr>
<tr><td>奥瑞</td></tr>
<tr><td>奥瑞</td></tr>
<tr><td>奥瑞</td></tr>
<tr><td>奥瑞</td></tr>
<tr><td>奥瑞</td></tr>
<tr><td>奥瑞</td></tr>
<tr><td>奥瑞</td></tr>
<tr><td>奥瑞</td></tr>
<tr><td>奥瑞</td></tr>
<tr><td>奥瑞</td></tr>
</table>
</div> </div>
<div class="tableContent">
<div id="kk">
<div id="fixedHeader">
<table>
<tr>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
</tr>
</table>
</div>
</div> <div id="tableContentTwo" @scroll="fixedData">
<table>
<tr>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
</tr>
<tr>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
</tr>
<tr>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
</tr>
<tr>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
</tr>
<tr>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
</tr>
<tr>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
</tr>
<tr>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
</tr>
<tr>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
</tr>
<tr>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
</tr>
<tr>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
</tr>
<tr>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
</tr>
<tr>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
<td>南京</td>
<td>上海</td>
<td>温州</td>
<td>杭州</td>
</tr>
</table>
</div>
.tableContainer{
margin-top: .05rem;
overflow: hidden;
background-color: #fff;
.boxSizing;
padding: .2rem;
table{
table-layout:fixed;
border:1px solid #e0e0e0;
tr{
border:1px solid #e0e0e0;
td{
border-right: 1px solid #e0e0e0;
.boxSizing;
text-align: center;
.fontSize(14);
.lineHeight(38);
}
}
}
.sideTable{
float: left;
.width(160);
span{
display: block;
.fontSize(14);
.lineHeight(38);
border:1px solid #e0e0e0;
background-color: #eee;
.boxSizing;
.width(160);
padding-left: .5em;
}
#sideTable{
max-height: 2rem;
overflow: hidden;
border-bottom: 1px solid #e0e0e0;
table{
border-top:none;
tr{
border-right: none;
&:nth-of-type(1){
border-top:none;
}
}
td{
.width(160);
text-align: left;
.boxSizing;
padding-left: 0.5em;
border-right: none;
}
}
}
}
.tableContent{
float: left;
.width(1440);
#kk{
width: 100%;
overflow: hidden;
border-right: 1px solid #e0e0e0;
#fixedHeader{
width: 100%;
table{
width:10rem;
tr{
border-top:1px solid #e0e0e0;
td{
background-color: #eee;
.width(160);
}
}
}
}
}
#tableContentTwo{
.width(1458);
max-height: 2.19rem;
overflow-y: auto;
overflow-x: auto;
}
table{
width: 10rem;
border-top: none;
border-left: none;
tr{
&:nth-of-type(1){
border-top: none;
}
td{
.width(160);
}
}
}
}
}
固定table的表头同时固定列的更多相关文章
- (转)supertable像excel那样固定table的表头和第一列
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...
- Saiku如何固定查询结果table的表头和首列
在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...
- bootstrap中固定table的表头
前端时间鼓捣的一个简单的手机站点,今天又拿出来弄一弄 由于主要是给手机訪问.用的是bootstrap响应式布局,今天的任务是做一个数据展示页面 可是因为数据的列比較多.所以横向显示不下,为了较好的显示 ...
- JavaScript：固定table的表头
当表格数据很多,以致于容器块元素出现滚动条.而在滚动滚动条的时候,数据行会被块元素遮挡.若要保持表格的head部分始终在可视范围内,我们需要对表头进行特殊的样式设置.下面的jsp代码可以实现表头固定, ...
- layui table表格 表头与内容列错位问题（只有纵向滚动条的情况）
版本2.4.5 问题展示: 存在问题:正好错位一个纵向滚动条的宽度 思路: 仔细观察th元素及th包裹的子元素div 如下图 发现th宽度莫名的就多了5px 我就纳闷了 解决方案:到table.js ...
- asp.net table表格表头及列固定实现
http://blog.csdn.net/zdw_wym/article/details/48630337 在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看 ...
- 固定Table的头部和左边的列-在Knockout Js使用场景下
要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/so ...
- 前端html之------>Table实现表头固定
文章来源于:https://www.cnblogs.com/dacuotecuo/p/3657779.html,请尊重原创,转载请注明出处. 说明:这里主要实现了表头的固定和上下滚动的滑动实现:时间的 ...
- easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）
easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行 最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...
随机推荐
- 027 Remove Element 移除元素
给定一个数组和一个值,在这个数组中原地移除指定值和返回移除后新的数组长度.不要为其他数组分配额外空间,你必须使用 O(1) 的额外内存原地修改这个输入数组.元素的顺序可以改变.超过返回的新的数组长度以 ...
- 021 Merge Two Sorted Lists 合并两个有序链表
Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...
- HDU 5775 L - Bubble Sort 树状数组
给定一段冒泡排序的代码,要求输出每个数字能到达的最右边的位置和最左边的位置的差 因为那段冒泡排序的代码是每次选取一个最小的数,放在左边的,所以,每个数最多能到达右边的位置应该是起始位置i+右边有多少个 ...
- js车牌号校验
function cpyz(str) { var newcarnum= str.value.toUpperCase(); var regExp = /(^[\u4E00-\u9FA ...
- 牛客网Java刷题知识点之匿名对象
不多说,直接上干货! 匿名对象的两种用途: 1.当对象对方法仅进行一次调用的时候,就可以简化成匿名对象. 2.匿名对象可以作为实际参数进行传递. 匿名对象顾名思义就是没有名字的对象. new Car( ...
- jquery选择器大全参考
在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象 ...
- Centos7.5搭建ELK-6.5.0日志分析平台
Centos7.5搭建ELK-6.5.0日志分析平台 1. 简介 工作工程中,不论是开发还是运维,都会遇到各种各样的日志,主要包括系统日志.应用程序日志和安全日志,对于开发人员来说,查看日志,可以实时 ...
- spring-boot整合shiro作权限认证
spring-shiro属于轻量级权限框架,即使spring-security更新换代,市场上大多数企业还是选择shiro 废话不多说 引入pom文件 <!--shiro集成spring--& ...
- hibernate课程 初探单表映射3-2 基本类型
本节内容:(介绍基本类型) 1 数据类型 简介 2 时间类型 简介 3 时间类型 demo 1 hibernate类型 java类型 integer/int java.lang.Integer/i ...
- The sventh day
call it a day 是个相当古老的习惯用语,沿用至今已经有一百五十多年了,但是人民仍然常常用到她. call it a day 可不是“叫一天”的意思哦, 这里是收工的,下班的意思 I thi ...