<html>

    <head>

        <meta charset="utf-8"/>

        <script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>

        <script type="text/javascript" src="js/jquery.freezeheader.js"></script>

        <style type="text/css">

            table{width: 100%; border-collapse:collapse; text-align: center;}

            table thead{background-color: #CCCCCC;}

            table tr td{border:1px solid red;  }

        </style>

    </head>

<body>

    <table id="mytable">

        <thead>

            <tr>

                <td>表头1</td>   <td>表头2</td>  <td>表头3</td>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>   <td>2</td>  <td>3</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td>总计</td>   <td>总计</td>  <td>总计</td>

            </tr>

        </tfoot>

    </table>

     <script>

     //不要问我为啥js生成，因为一个一个写，难看还慢

        for (var i=0; i<20; i++) {

            $("tbody").append($("tbody tr:first").clone())

        }

    //锁定头部

    $("#mytable").freezeHeader({ 'height': '300px' });

     </script>

</body>

</html>

源码展示>>

table表头thead固定的更多相关文章

  1. 网页制作中在头部固定悬浮table表头(thead)的方法

    这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简 ...

  2. table中thead固定一直在最上面

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/boot ...

  3. 纯CSS,table的thead固定,tbody显示滚动条

    以下代码,仅在谷歌下测试过 首先是html的table的代码: <table class="tablediv" id="myTable" border=& ...

  4. table 表头固定 thead固定. 1) 使用jquery.freezeheader.js

    方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...

  5. bootstrap table 实现固定悬浮table 表头并可以水平滚动

    在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...

  6. table表头固定问题

    table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...

  7. HTML table表头固定

    HTML table表头固定 说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: <!DOCTYPE html> <html> <head> < ...

  8. 固定table的表头同时固定列

    table表格是我们最常使用的数据显示一种形式,但有时候数据比较多的时候 就需要我们去固定表头,固定列.我这里用简单的css样式配合两句js脚本来实现,希望能够去帮到你. <div class= ...

  9. Bootstrap表格中，thead固定，tbody有垂直滚动条

    1.html源码:这里的table是使用的vue写法,实际生成的表格和一个一个写的tr th td无异 <div class="panel-body no-padding"& ...

随机推荐

  1. memcached内存分配及回收初探

    对memcached(后面简称mc) 的内存分配及回收机制进行了深度分析和测试,以下是一些学习的心得,和大家共同探讨一下,期望能抛砖引玉 mc简介: mc是由LiveJournal技术团队开发的一套分 ...

  2. NSSortDescriptor(数组排序)

    如果数组里面的每一个元素都是一个个model,例如 DepartsDate.h文件 [plain] view plaincopy #import <Foundation/Foundation.h ...

  3. hone hone clock人体时钟

    hone hone clock是个十分有趣的人体时钟,这个时钟代码分两种一种是背景透明的,一种 是白色背景的,把你喜欢的代码添加到你的网页中适当位置即可.两种代码如下: <script char ...

  4. Mongodb 集群搭建以及常见错误(不分块，分片，以及加验证)

    1 关于Replica Sets +Sharding(主从复制加分片)搭建,不这详细去说,网上有很多,大部分的例子就三台服务器之间做主从复制,分2个shard,架构图如下 mongodb节点 分别为 ...

  5. C++函数调用

    C++函数调用(1) 这篇博客名字起得可能太自大了,搞得自己像C++大牛一样,其实并非如此.C++有很多隐藏在语法之下的特性,使得用户可以在不是特别了解的情况下简单使用,这是非常好的一件事情.但是有时 ...

  6. 如何使用ssh

    如何使用ssh自己的笔记本做不了我的运算,只能依靠办公室的工作站,有时很不方便.所以做了一次远程监控.本想用vnc的,发现怎么都连不上,算了.还是SSH好用.工作站和笔记本都是fedora系统,所以默 ...

  7. javascript 闭包基础分享

    javascript 闭包基础分享 闭包向来给包括JavaScript程序员在内的程序员以神秘,高深的感觉,事实上,闭包的概念在函数式编程语言中算不上是难以理解的知识.如果对作用域,函数为独立的对象这 ...

  8. WCF服务承载

    WCF服务承载(笔记)   自托管(也做自承载) 承载 WCF 服务最灵活.最便捷的方法就是进行自承载.要能够自承载服务,必须满足两个条件.第一,需要 WCF 运行时:第二,需要可以承载 Servic ...

  9. solrcloud集群部署

    Zookeeper安装 Zookeeper的安装和配置十分简单, 既可以配置成单机模式, 也可以配置成集群模式. 下面将分别进行介绍. 注意防火墙和selinux,关闭后进行如下配置,由于是Java写 ...

  10. 初识sql server 2000-数据库的连接

    这段时间主要进行学生信息管理系统的实现,所以与数据库打交道是难免的,我也是刚敲过5个数据库例子的小鸟,对数据库的理解还欠佳,不足之处大鸟飞过还请指点. 安装完sql server2000之后,首先要做 ...