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

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

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. 使用git整体流程

    一.git提交代码走meger请求的整体流程 工作中使用git推代码时,如果走merge请求,那么也就是说拉代码时拉公共代码库的代码,但是提交时需要先提交到自己的代码库,然后在gitlab上提交mer ...

  2. 数据库操作（ADO）

    QTP工具本身自带有数据查询和验证功能,但是使用的人会感觉这个功能使用起来比较麻烦,灵活性和复用性较低,于是我们选择了用脚本调用ADO组件实现数据库的操作,现总结下工作中用到的数据库操作,代码如下: ...

  3. 浏览器的CSS各种hack，大汇总

    对着IE久了也有感觉了,在win10出新浏览器以及中国的IE6+用户没有普及新的浏览器前IE还是个坑,所以hack这东西还是要掌握一点的.不废话直接贴图 记得之前在项目里面针对IE6的hack是这样写 ...

  4. YARN学习笔记 ResourceManager部分

    CompositeService 多个service封装,service定义了状态机状态改变的合法情况. 重要的方法是(子类需要实现的):serviceStart,serviceInit,servic ...

  5. Linux下Boost交叉编译

    http://davidlwq.iteye.com/blog/1580752 运行环境:ubuntu 12.04, boost 1.50.0 由于要把boost移植到arm板上去,所以折腾了一下,后来 ...

  6. Spring MVC 3.0.5+Spring 3.0.5+MyBatis3.0.4全注解实例详解（三）

    前两章我为大家详细介绍了如何搭建Maven环境.Spring MVC的流程结构.Spring MVC与Struts2的区别以及示例中的一些配置文件的分析.在这一章,我就对示例的层次结构进行说明,以及M ...

  7. JavaPersistenceWithHibernate第二版笔记-第六章-Mapping inheritance-002Table per concrete class with implicit polymorphism(@MappedSuperclass、@AttributeOverride)

    一.结构 二.代码 1. package org.jpwh.model.inheritance.mappedsuperclass; import javax.persistence.MappedSup ...

  8. QStandardItemModel简单好用，QTableView带进度条

    类QabstractItemModel,QabstractListModel,QAbstractTableModel不保存数据,用户需要从这些类派生出子类,并在子类中定义某种数据结构来保存数据.与此不 ...

  9. 源码深度解析SpringMvc请求运行机制（转）

    源码深度解析SpringMvc请求运行机制 本文依赖的是springmvc4.0.5.RELEASE,通过源码深度解析了解springMvc的请求运行机制.通过源码我们可以知道从客户端发送一个URL请 ...

  10. Linux服务器沦陷为肉鸡的全过程实录

    1 从防火墙瘫痪说起 2015年3月10日,还没到公司就被电话告知办公室无法正常连接互联网了,网速非常慢,无法正常浏览网页.急急忙忙感到公司,开始查找问题. 首先排除了交换机故障,因为内部局域网正常. ...