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

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

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. node操作MongoDB数据库之插入

    在上一篇中我们介绍了MongoDB的安装与配置,接下来的我们来看看在node中怎样操作MongoDB数据库. 在操作数据库之前,首先应该像关系型数据库一样建个数据库把... 启动数据库 利用命令提示符 ...

  2. http://jingyan.baidu.com/article/d169e186b38c37436611d8fa.html

    http://jingyan.baidu.com/article/d169e186b38c37436611d8fa.html

  3. android-exploitme（六）：基础加密

    这次我们看看程序在设备上存储了什么敏感信息 (server-env)sartre:AndroidLabs2 maxim$ adb shell # cd /data/data/com.securityc ...

  4. linux 打开文件数 too many open files 解决方法

    linux 打开文件数 too many open files 解决方法 too many open files 出现这句提示的原因是程序打开的文件/socket连接数量超过系统设定值. 查看每个用户 ...

  5. J2ee 巴巴网站制作（一）

    用户模块图:

  6. HDU 4634 Swipe Bo 状态压缩+BFS最短路

    将起始点.终点和钥匙统一编号,预处理: 1.起始点到所有钥匙+终点的最短路 2.所有钥匙之间两两的最短路 3.所有钥匙到终点的最短路 将起始点和所有钥匙四方向出发设为起点BFS一遍,求出它到任意点任意 ...

  7. java eclise的配置

    java eclise的配置 http://jingyan.baidu.com/album/870c6fc33e62bcb03fe4be90.html?picindex=24

  8. 通过xrdp实现远程桌面连接Windows Azure linux虚拟机

    本文以Oracle Linux 6.4虚拟机为示例(22及3389端口必须打开,分别用于SSH及RDP连接) 1.在安装xrdp之前,首先需要安装一些必要的包,如: # yum -y install ...

  9. js调用高德API获取所在当前城市

    可以在js代码中直接调用API接口,获取所处当前城市信息,代码如下: <script type="text/javascript"> function getCurre ...

  10. C# 时间戳和时间的相互转换

    时间戳定义为从格林威治时间 1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数. C#格式时间转时间戳Timestamp private in ...