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

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

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. BestCoder 1st Anniversary($) 1003 Sequence

    题目传送门 /* 官方题解: 这个题看上去是一个贪心, 但是这个贪心显然是错的. 事实上这道题目很简单, 先判断1个是否可以, 然后判断2个是否可以. 之后找到最小的k(k>2), 使得(m-k ...

  2. Yarn上的几个问题整理

    原文链接   http://xiguada.org/yarn_some_question/ ‎   1. NodeManager是如何Kill掉Container的呢? 答,在DefaultConta ...

  3. Java笔记——equals和==的区别

    摔在这里几次,还是记下来吧. 原文:http://www.cnblogs.com/shenliang123/archive/2012/04/16/2452156.html -------------- ...

  4. MAC的一些实用

    重置Dock, Launchpad defaults write com.apple.dock ResetLaunchPad -bool true; killall Dock;

  5. JSP下载txt 和 Excel两种文件

    JSP下载txt 和 Excel两种文件 jsp 下载txt文件和excel文件   jsp 下载txt文件和excel文件 最近做了个用jsp下载的页面 将代码贴出来 权作记录吧 1 下载txt文件 ...

  6. 生成n对括号的所有合法排列

    实例 n = 3,所有的合法序列 ((()))  (()()) (())() ()(()) ()()() 思路 针对一个长度为2n的合法排列,第1到2n个位置都满足如下规则 左括号的个数≥右括号的个数 ...

  7. delphi常用函数

    直接引用了 http://www.cnblogs.com/doit8791/archive/2012/05/17/2507073.html.

  8. OkHttp使用进阶（译自OkHttp官方教程）

    没有使用过OkHttp的,可以先看OkHttp使用介绍 英文版原版地址 Recipes · square/okhttp Wiki 同步get 下载一个文件,打印他的响应头,以string形式打印响应体 ...

  9. PHP读取Mongodb数据报错，Cannot natively represent the long 8331412483000 on this platform

    在使用PHP进行读取Mongo数据时,如果读取的int数据过大时,会自动转变为int64位. 并会报以下错误: Cannot natively represent the long 833141248 ...

  10. allegro使用汇总 [转贴]

    1.如何在allegro中取消花焊盘(十字焊盘) set up->design parameter ->shape->edit global dynamic shape parame ...