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 ...
随机推荐
- ABP集合帖
http://www.cnblogs.com/kebinet/p/5341663.html http://www.cnblogs.com/farb/p/ABPAdvancedTheoryContent ...
- 测试in和or的执行时间
declare @d datetime set @d=getdate() /*你的SQL脚本开始*/ SELECT * FROM T_KNOWLEDGE WHERE KNOWLEDGE_TYPE_OI ...
- http://www.cnblogs.com/leiOOlei/p/5075402.html
http://www.cnblogs.com/leiOOlei/p/5075402.html
- Android SlidingMenu侧滑菜单使用
把下载的侧滑菜单压缩包打开,会有一个library文件夹,在eclipse中import existing android code into workspace,导入library文件夹,并且选择作 ...
- 重温《js权威指南》 第7，8章
第七章 数组 数组是值的有序集合.js数组是无类型的,数组元素可以是任意类型,同一个数组中不同元素也可能有不同的类型.数组可以动态增长或缩减,创建时无须生命那个一个固定的大小并且数组大 ...
- Redis的Order Set操作
有序集合 zadd key score1 value1 score2 value2 .. 添加元素 127.0.0.1:6379> zadd class 12 lily 13 lucy 18 l ...
- CentOS系统启动过程1-10 详细叙述
昨日有个前辈问我,liunx系统是如果启动的,我只是说了个大概,但具体的过程没有理解透彻,今天特意在网上找到下面的流程图,并根据图,进行了详细叙述,如有问题,请指出. 启动第一步--加载BIOS 设 ...
- TCP三次握手和四次挥手过程及套接字在各个过程中的状态解析
说起TCP,我们一般都需要知道发起一个tcp连接和终止一个tcp连接是所发生的事情,下边,我将跟大家介绍下tcp的三次握手及四次挥手的过程. TCP三路握手 (1)服务器必须准备好接受外来的连接.这通 ...
- Android 非Activity类引用getResources()方法问题的解决方法
在进行Android开发的过程中,在一个非Activity类(此处假设类名为MyNewClass)中引用了getResources()方法,如下: Bitmap bmp = BitmapFactory ...
- Eclipse中使用正则表达式搜索替换
Eclipse中使用正则表达式搜索替换 分类:software | 标签: 正则表达 替换 eclipse 2011-11-29 11:28 阅读(1930)评论(0)编辑删除 最近在eclip ...