前一段时间来了一个汇总的需求，想锁定表头，这个问题在网上找了老半天，实现起来都比较麻烦，经过这几天的摸索终于找到一个简洁的处理方法

下面介绍一下如何处理的：

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 锁定表头，出滚动对齐的更多相关文章

  1. vue中获取滚动table的可视页面宽度，调整表头与列对齐(每列宽度不都相同)

    mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => ...

  2. H5手机开发锁定表头和首列(惯性滚动)解决方案

    前端时间移动端在做表格的时候需要这个功能,由于还有实现类似原生的惯性滚动功能,于是使用了iscroll插件. iscroll插件下载地址:iscroll5 该功能demo github地址: http ...

  3. 锁定表头和固定列(Fixed table head and columns)

    源码: /// <summary> /// 锁定表头和列 /// <para> sorex.cnblogs.com </para> /// </summary ...

  4. HTML table固定表头

    最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬..... 1.thead和tbody的display设置为block; 这种可以实现,但是需要提前设置好每个th和td的 ...

  5. 润乾报表新功能–导出excel支持锁定表头

     在以往的报表设计中,锁定表头是会经常被用到的一个功能,这个功能不仅能使浏览的页面更加直观,信息对应的更加准确,而且也提高了报表的美观程度.但是,很多客户在将这样的报表导出excel时发现exce ...

  6. html5 table的表头固定的HTML代码

    table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  7. asp.net table表格表头及列固定实现

    http://blog.csdn.net/zdw_wym/article/details/48630337 在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看 ...

  8. (转)supertable像excel那样固定table的表头和第一列

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...

  9. js Table冻结表头示例代码

    Table冻结表头的js实现代码. Table冻结表头: <script type="text/javascript"> //冻结table的表头  function  ...

随机推荐

  1. JS事件驱动机制

    还记得当初学JAVA-GUI编程时学习过事件监听机制,此时再学习JavaScript中的事件驱动机制,不免简单.当初学习时也是画过原理图,所以从原理图开始吧! js是采用事件驱动(event-driv ...

  2. 分布式 Key-Value 存储系统：Cassandra 入门

    Apache Cassandra 是一套开源分布式 Key-Value 存储系统.它最初由 Facebook 开发,用于储存特别大的数据. Cassandra 不是一个数据库,它是一个混合型的非关系的 ...

  3. CentOS系统启动过程1-10 详细叙述

    昨日有个前辈问我,liunx系统是如果启动的,我只是说了个大概,但具体的过程没有理解透彻,今天特意在网上找到下面的流程图,并根据图,进行了详细叙述,如有问题,请指出. 启动第一步--加载BIOS  设 ...

  4. Netty4.x中文教程系列(三) Hello World ！详解

    Netty 中文教程 (二) Hello World !详解 上一篇文章,笔者提供了一个Hello World 的Netty示例. 时间过去了这么久,准备解释一下示例代码. 1.HelloServer ...

  5. Oracle ->> 层级查询语句（hierarchical query）connect by

    Oracle中的Connect By... Start With语句实现了递归查询或者树状查询. Connect By Prior 一方为起始(root)的ID 参考: http://www.360d ...

  6. [IT] 关闭笔记本的蜂鸣提示

    很久没有写什么了,今天开过workshop, 稍微放松些, 一时动念上来看看,没想到最近一篇都是2010年的了, 不得不感叹时光流逝之快啊. 那就写点什么吧. 现在每天工作用的DELL笔记本,性能差强 ...

  7. linux dsp 播放音频文件

    #include <unistd.h> #include <fcntl.h> #include <sys/types.h> #include <sys/ioc ...

  8. python 中的map 详解

    python中的map函数应用于每一个可迭代的项,返回的是一个结果list.如果有其他的可迭代参数传进来,map函数则会把每一个参数都以相应的处理函数进行迭代处理.map()函数接收两个参数,一个是函 ...

  9. git使用ssh协议，生成公钥和私钥，并指定私钥

    http://superuser.com/questions/232373/how-to-tell-git-which-private-key-to-use In ~/.ssh/config, add ...

  10. 第五篇 Getting Started with ORACLE EBS（开始学习ORACLE EBS）

    第一篇介绍了ERP软件是供应链管理软件.告诉你这个软件改善或提升企业管理的切入点和着力点.有了着力点才能给力. 第二篇介绍了什么是咨询以及咨询工作共通的章法,告诉了你咨询的套路是什么,就像练习一套拳, ...