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

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

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. NPOI之Excel——合并单元格、设置样式、输入公式

    首先建立一个空白的工作簿用作测试,并在其中建立空白工作表,在表中建立空白行,在行中建立单元格,并填入内容: //建立空白工作簿 IWorkbook workbook = new HSSFWorkboo ...

  2. hdu 4664 Triangulation（题意已在讨论版中说明）

    题意: 给定n个平面(平面之间相互独立),每个平面上有一些点,并且构成凸集,C和D轮流选一个平面连接两个点画线段,并保证线段之间除了端点之外没有其它交点,当平面上出现一个完整的三角形之后此平面就不能继 ...

  3. Android核心分析之十四Android GWES之输入系统

          Android输入系统 依照惯例,在研究Android输入系统之前给出输入系统的本质描述:从哲学的观点来看,输入系统就是解决从哪里来又将到哪里去问题.输入的本质上的工作就是收集用户输入信息 ...

  4. php 实现树形结构

    <?phpclass Tree{ private $OriginalList; public $pk;//主键字段名 public $parentKey;//上级id字段名 public $ch ...

  5. asp.net+swfupload 多图片批量上传(附源码下载)

    asp.net的文件上传都是单个文件上传方式,无法执行一次性多张图片批量上传操作,要实现多图片批量上传需要借助于flash,通过flash选取多个图片(文件),然后再通过后端服务进行上传操作. 本次教 ...

  6. 293. Flip Game

    题目: You are playing the following Flip Game with your friend: Given a string that contains only thes ...

  7. Java：基本数据类型包装类

    基本数据类型对象包装类    基本数据类型(关键字)   引用数据类型(类)          byte                          Byte          short   ...

  8. 《Linux/Unix系统编程手册》读书笔记 目录

    <Linux/Unix系统编程手册>读书笔记1  (创建于4月3日,最后更新4月7日) <Linux/Unix系统编程手册>读书笔记2  (创建于4月9日,最后更新4月10日) ...

  9. Eclipse插件安装与使用 —— Properties Editor

    一.下载     首先当然是下载插件啦! 下载地址:http://sourceforge.jp/projects/propedit/downloads/40156/jp.gr.java_conf.us ...

  10. 虚拟机 linux系统如何安装vmware Tools

    1.打开VMware Workstation虚拟机,开启CentOS系统 虚拟机-安装VMware Tools 登录CentOS终端命令行 2.mkdir /media/mnt    #新建挂载目录 ...