固定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%以上的界面需 ...
随机推荐
- 如何在同一台机器上安装多个MySQL的实例 转
https://www.cnblogs.com/shangzekai/p/4375271.html 最近由于工作的需要,需要在同一台机器上搭建两个MySQL的实例,(注:已经存在了一个3306的MyS ...
- C# String.Format方法
一.定义String.Format是将指定的 String类型的数据中的每个格式项替换为相应对象的值的文本等效项. 如: (1)string p1 = "Jackie";strin ...
- python学习一(Python中的列表)
python中有两种列表,分别用()和[]表示: 例如: letter = ('a','b','c') letter = ['a','b','c'] 用小括号表示的列表初始化后不允许修改,而中中括号生 ...
- 机器学习框架ML.NET学习笔记【2】入门之二元分类
一.准备样本 接上一篇文章提到的问题:根据一个人的身高.体重来判断一个人的身材是否很好.但我手上没有样本数据,只能伪造一批数据了,伪造的数据比较标准,用来学习还是蛮合适的. 下面是我用来伪造数据的代码 ...
- CentOS7.5搭建Hadoop分布式集群
材料:3台虚拟主机,ip分别为: 192.168.1.201 192.168.1.202 192.168.1.203 1.配置主机名称 三个ip与主机名称分别对应关系如下: 192.168.1.201 ...
- EditPlus常用操作
EditPlus注册码在线生成 http://www.jb51.net/tools/editplus/ 随意填写个用户名,生成对应的密码就可以使用editplus了 EditPlus常用快捷键 编代码 ...
- webpack.config.js====引入Jquery库文件
1. 安装 cnpm install --save jquery expose-loader 2. 在webpack.config.js中配置 Jquery库是使用的webpack的一个插件Provi ...
- 初识quartz 并分析 项目中spring整合quartz的配置【原创+转载】
初识quartz 并分析 项目中spring整合quartz的配置[原创+转载]2018年01月29日 12:08:07 守望dfdfdf 阅读数:114 标签: quartz 更多个人分类: 工具 ...
- Java算法面试题 一个顺子带一对
打牌里面经常出现的5张牌,一个顺子带一对,给你五张牌,比如:1,2,2,2,3 或者 5,6,7,4,4 或者 2,4,3,5,5 或者 7,5,9,6,9 ,这种情况就符合一个顺子带一对,则返回 t ...
- 异步加载js的3种方式
默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页 ...