<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. CloudFormation

    亚马逊云服务之CloudFormation   亚马逊的Web Service其实包含了一套云服务.云服务主要分为三种: IaaS: Infrastructure as a service,基础设施即 ...

  2. Json反序列化

    迟来的Json反序列化   源码发布 搞了一个下午,终于搞定改了这个号称中国的github...以后源码直接在这里发布了(英文实在太烂了) https://code.csdn.net/jy023050 ...

  3. jquery禁用右键单击、F5刷新

    1.禁用右键单击功能 $(document).ready(function() { $(document).bind("contextmenu",function(e) { ale ...

  4. [原创*精华]一键发布ASP.NET Web安装程序,搞WebForm的童鞋看过来...

          重要更新:鉴于很多小伙伴们说看不到图,我这边换了几个浏览器看了下,都看得到的,估计是网速问题,请耐心等待,另外,为了更好的方便大家学习,特此提供源码以及一个word文档,word文档就是本 ...

  5. linux前四天学习笔记

    以下是在linux培训机构所学的内容,感觉比较乱 MySQL学习笔记MySQL的安装 linux中的超级管理员rootaixocm vnc的退出: F8 MySQL的特点.优点:关系型开源.免费c++ ...

  6. [Android学习笔记4]四大应用组件之一：Service 上

    一.什么是Service 一个Service就是一个能够在后台执行长时操作的应用程序组件,并且不提供用户界面.一个应用程序组件能够启动一个Service,即使用户切换到另一个应用程序,这个Servic ...

  7. [置顶] NS2中对TCP数据包和ACK包的TCP Sink类的主要实现代码详尽剖析--吐血放送

    NS2中对TCP数据包和ACK包的TCP Sink类的主要实现代码详尽剖析,限于个人水平,如有错误请留言指出! TcpSink类的recv()方法: void TcpSink::recv(Packet ...

  8. Big Data Ingestion and streaming product introduction

    Flume Flume isdistributed system for collecting log data from many sources, aggregating it,and writi ...

  9. linux 网络编程：客户端与服务器通过TCP协议相互通信 + UDP

    1.TCP编程的客户端一般步骤: 1.创建一个socket,用函数socket(): 2.设置socket属性,用函数setsockopt():* 可选: 3.绑定IP地址.端口等信息到socket上 ...

  10. 主引导记录MBR/硬盘分区表DPT/主分区、扩展分区和逻辑分区/电脑启动过程

    主引导扇区主引导扇区位于整个硬盘的0柱面0磁头1扇区{(柱面,磁头,扇区)|(0,0,1)},bios在执行自己固有的程序以后就会jump到MBR中的第一 条指令.将系统的控制权交由mbr来执行.主引 ...