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 ...
随机推荐
- C# Task的使用---Task的启动
.NET 4.0包含的新名称空间System.Threading.Tasks,它包含的类抽象出了线程功能.任务表示应完成的某个单元的工作.这个单元的工作可以在单独的线程中运行,也可以以同步的方式启动一 ...
- lintcode：两数组的交 II
题目 计算两个数组的交 注意事项 每个元素出现次数得和在数组里一样答案可以以任意顺序给出 样例 nums1 = [1, 2, 2, 1], nums2 = [2, 2], 返回 [2, 2]. 解题 ...
- mysql 复杂的查询语句，工作中用到的记录下
1 去重查询 select distinct id from user_info where xxxxxx 2 group by 分组查询中排序 group by本身没有排序功能,这可能是mysql ...
- iOS 网络处理注意点
原文链接:http://www.jianshu.com/p/a086c33566be 一. AFN 使用注意点 1. block循环引用 bug 解决 2.请求管理者 1.请求管理者存储到内存 请求管 ...
- C编译器剖析PDF文档及UCC编译器162.3
http://blog.csdn.net/sheisc/article/details/42387857 http://blog.csdn.net/sheisc/article/details/455 ...
- HttpClient 4.x 执行网站登录并抓取网页的代码
HttpClient 4.x 的 API 变化还是很大,这段代码可用来执行登录过程,并抓取网页. HttpClient API 文档(4.0.x), HttpCore API 文档(4.1) pack ...
- Python 优雅的操作字典【转】
Python 中的字典是Python中一个键值映射的数据结构,下面介绍一下如何优雅的操作字典. 1.1 创建字典 Python有两种方法可以创建字典,第一种是使用花括号,另一种是使用内建 函数dict ...
- MySQL工具:管理员必备的10款MySQL工具
MySQL是一个复杂的的系统,需要许多工具来修复,诊断和优化它.幸运的是,对于管理员,MySQL已经吸引了很多软件开发商推出高品质的开源工具来解决MySQL的系统的复杂性,性能和稳定性,其中大部分是免 ...
- Enumerable.SequenceEqual
Determines whether two sequences are equal by comparing the elements by using the default equality c ...
- STL笔记（6）标准库：标准库中的排序算法
STL笔记(6)标准库:标准库中的排序算法 标准库:标准库中的排序算法The Standard Librarian: Sorting in the Standard Library Matthew A ...