固定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%以上的界面需 ...
随机推荐
- LeetCode 236 Lowest Common Ancestor of a Binary Tree 二叉树两个子节点的最低公共父节点
/** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode ...
- svn地址迁移
关于svn设置如下: 1. 点击如果所示[Relocate]: 2. 会弹出两个框:一个让你输入用户名密码:一个是svn地址: 3. 先把svn地址改一下,然后输入用户名密码,点确定.就ok啦!
- Unity [Tooltip("")]
把Ad2Controller脚本挂在Ad2Ad3Manager游戏对象上,在非运行状态下把鼠标放在inspector的AdButtonObj2上就会显示广告2按钮. 如下图:
- Unity UGUI暂停按钮切换图片代码
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; ...
- js电话号码校验
var contact_phone = $("#contact_phone").val(); if(contact_phone && /^1[3|4| ...
- Mac开启自带的Apache服务器
OSX版本10.13.6 1.开启 sudo apachectl start 2.关闭 sudo apachectl stop 3.重启 sudo apachectl restart 默认的Apach ...
- Java中的Enum(枚举)用法介绍
1. 关于Java Enum:学过C/C++等语言的人,应该都对Enum类型略知一二.Enum一般用来表示一组相同类型的常量.如性别.日期.月份.颜色等.对这些属性用常量的好处是显而易见的,不仅可以保 ...
- Matlab之数据处理
写在前面的,软件不太强大,每次保存都需要生成rec和dark的文件,在处理是只需要一个就行了,所有网上查看了下运用批处理的命令去掉多余的文件: 解决办法:windows命令模式下CMD进入文件的目录, ...
- MySQL计算日期的函数DATE_SUB(d,INTERVAL expr type)
MySQL计算日期的函数DATE_SUB(d,INTERVAL expr type) DATE_SUB(d,INTERVAL expr type)函数返回起始日期d减去一个时间段后的日期. expr是 ...
- MySQL 返回指定长度的字符串
今天在做 iblog 项目时,有一个需求是,从 MySQL 返回某个字段的值要时要指定长度,上网搜到的方法是使用 MySQL 的字符串处理函数,如 left(str, length),right(st ...