固定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%以上的界面需 ...
随机推荐
- 在spark2中的shell使用python3
在spark2中的shell使用python3 spark2.0.0中的python默认使用python2,可以通过以下两种方式之一使用python3: PYSPARK_PYTHON=python3 ...
- parameter与attribute的使用场合（转载自草原和大树）
Attribute 和 Parameter 的区别 (1)HttpServletRequest类有setAttribute()方法,而没有setParameter()方法 (2)当两个Web组件之间为 ...
- 自定义HashMap的键
用自定义的类型作为HashMap的key,必须同时重载hashCode()和equals(),才可以实现在HashMap中的查找自定义键. 例如自定义Point类: public class Poin ...
- 【精华】9张思维导图带你学习Javascript
转自:ChokCoco(http://www.cnblogs.com/coco1s/p/3953653.html) 学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将po出8张javasc ...
- Ubuntu 12.04搭建svn服务器【转】
这是一个比较老旧的话题,毕竟大家现在都使用Git(http://git-scm.com/),Git在分支.代码存储.冲突.速度方面的机制都更优秀. 那我们难道还有使用svn的场景?当然,比如对Git很 ...
- Google pieCharts的学习
在公司项目开发过程中, 尤其是在网站的开发过程中,用到很多的前端的插件,在这里, 我简单介绍下近期Google pieCharts的是使用方法 https://developers.google.co ...
- 浏览器兼容圆角Border-radius的问题
圆角css代码:border-radius只有在以下版本的浏览器:Firefox4.0+.Google Chrome 10.0+.Opera 10.5+.IE9+支持border-radius标准语法 ...
- 时序js插件cubism使用
document http://iwantmyreal.name/blog/2012/09/16/visualising-conair-data-with-cubism-dot-js https:// ...
- 第1章 .Net应用程序体系结构
1. CLR:公共语言运行库,是每种.Net编程语言都使用的运行库 Windows 8为Windows Store应用程序引入了一个新的编程接口:Windows运行库. C# 6 具有许多小而实用的语 ...
- ssh登录卡住问题
使用ssh登录远程centos服务器,卡住不动 系统centos 7 加-v查看登录过程,一直卡在这里 解决:我的是mtu问题 将eth0 mtu 默认1500修改为1200就可以了 ifconfig ...