table 锁定表头，出滚动对齐
前一段时间来了一个汇总的需求，想锁定表头，这个问题在网上找了老半天，实现起来都比较麻烦，经过这几天的摸索终于找到一个简洁的处理方法
下面介绍一下如何处理的：
1、thead 和tbody 放两个table里面 主要是让表头的父容器padding-right: 17px; 17px是滚动条的宽度，可以通过js动态求出滚动条的宽度，然后设置父容器的宽度即可
<div style="width: 100%;">
<!--表头-->
<div id="mytable" style="width: 100%; padding-right: 17px;">
<table style="width: 100%;">
<tr>
<th>
表头一
</th>
<th>
表头一
</th>
<th>
表头一
</th>
<th>
表头一
</th>
<th>
表头一
</th>
<th>
表头一
</th>
<th>
表头一
</th>
<th>
表头一
</th>
</tr>
</table>
</div>
<div id="container" style="width: 100%; overflow-y: scroll; height: 100px;">
<table style="width: 100%;">
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
<tr>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
</tr>
</tr>
</table>
</div>
<div>
</div>
</div>
大家可以预览一下：
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
|---|
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
table 锁定表头，出滚动对齐的更多相关文章
- vue中获取滚动table的可视页面宽度，调整表头与列对齐(每列宽度不都相同)
mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => ...
- H5手机开发锁定表头和首列(惯性滚动)解决方案
前端时间移动端在做表格的时候需要这个功能,由于还有实现类似原生的惯性滚动功能,于是使用了iscroll插件. iscroll插件下载地址:iscroll5 该功能demo github地址: http ...
- 锁定表头和固定列(Fixed table head and columns)
源码: /// <summary> /// 锁定表头和列 /// <para> sorex.cnblogs.com </para> /// </summary ...
- HTML table固定表头
最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬..... 1.thead和tbody的display设置为block; 这种可以实现,但是需要提前设置好每个th和td的 ...
- 润乾报表新功能–导出excel支持锁定表头
在以往的报表设计中,锁定表头是会经常被用到的一个功能,这个功能不仅能使浏览的页面更加直观,信息对应的更加准确,而且也提高了报表的美观程度.但是,很多客户在将这样的报表导出excel时发现exce ...
- html5 table的表头固定的HTML代码
table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- asp.net table表格表头及列固定实现
http://blog.csdn.net/zdw_wym/article/details/48630337 在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看 ...
- (转)supertable像excel那样固定table的表头和第一列
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...
- js Table冻结表头示例代码
Table冻结表头的js实现代码. Table冻结表头: <script type="text/javascript"> //冻结table的表头 function ...
随机推荐
- 自动化 测试框架部署（python3+selenium2）
安装Python 从https://www.python.org/downloads/下载最新版本的Python3,请注意,是3: 需要将Python的安装目录和安装目录下的Scripts文件夹添加到 ...
- 小鲜肉初学JS做得仿京东淘宝竖排二级导航
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equ ...
- 当C++学到第20天的时候我崩溃了（找回刚开始的激情）
首先声明,我是个使用多语言(ASM/C/C++/Java/Perl)的人,主要使用C++和Java所以我认为我的意见还算中肯.那些否定C++的人,你们是否了解————Borland鼓吹Delphi如何 ...
- TCP非阻塞accept和非阻塞connect
http://blog.chinaunix.net/uid-20751538-id-238260.html 非阻塞accept 当一个已完成的连接准备好被accept的时候,select会把监 ...
- LoadRunner8 安装步骤
一.介绍 LoadRunner,是一种预测系统行为和性能的负载测试工具.通过以模拟上千万用户实施并发负载及实时性能监测的方式来确认和查找问题,LoadRunner能够对整个企业架构进行测试.企业使用L ...
- React组件-mixin
一.组件 二.代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
- AndroidManifest.xml 配置权限大全
问登记属性 android.permission.ACCESS_CHECKIN_PROPERTIES ,读取或写入登记check-in数据库属性表的权限 获取错略位置 android.permissi ...
- hdu - 1180 诡异的楼梯 (bfs+优先队列)
http://acm.hdu.edu.cn/showproblem.php?pid=1180 注意点就是楼梯是在harry移动完之后才会改变方向,那么只要统计到达这个点时间奇偶性,就可以知道当前楼梯是 ...
- Windows Myeclipse 10 安装 Perl 插件
1.首先安装 windows 下的 perl 环境这里使用 active perl,选择最新版本 5.16.1下载地址:http://www.activestate.com/activeperl/do ...
- 《OD大数据实战》Flume环境搭建
一.CentOS 6.4安装Nginx http://shiyanjun.cn/archives/72.html 二.安装Flume 1. 下载flume-ng-1.5.0-cdh5.3.6.tar. ...