1. <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    注意这里的style是重点!!!
    <style>
        table tbody {
            display:block;
            height:195px;
            overflow-y:scroll;
        }
  2.  
  3.     table thead, tbody tr {
            display:table;
            width:100%;
            table-layout:fixed;
        }
  4.  
  5.     table thead {
            width: calc( 100% - 1em )
        }
        table thead th{ background:#ccc;}
    </style>
    </head>
  6.  
  7. <body>
    <table width="100%">
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>出生年月</th>
            <th>手机号码</th>
            <th>单位</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>13682299090</td>
            <td>阿里巴巴</td>
        </tr>
        <tr>
            <td>张三封</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>13682299090</td>
            <td>阿里巴巴与四十大盗</td>
        </tr>
        <tr>
            <td>张小三</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>13682299090</td>
            <td>腾讯科技</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>13682299090</td>
            <td>浏阳河就业</td>
        </tr>
        <tr>
            <td>张三疯子</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>13682299090</td>
            <td>阿里巴巴</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>13682299090</td>
            <td>阿里巴巴</td>
        </tr>
        <tr>
            <td>张大三</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>13682299090</td>
            <td>阿里巴巴</td>
        </tr>
        <tr>
            <td>张三五</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>13682299090</td>
            <td>阿里巴巴</td>
        </tr>
        <tr>
            <td>张刘三</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>13682299090</td>
            <td>阿里巴巴</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>13682299090</td>
            <td>阿里巴巴</td>
        </tr>
        </tbody>
    </table>
    </body>
    </html>

table 的thead th 固定 tbody滚动例子的更多相关文章

  1. 关于boostrap的thead固定tbody滚动

    原文地址:http://blog.csdn.net/bbsyi/article/details/51126041# 1 <!DOCTYPE html> 2 <html> 3 & ...

  2. table表格中实现tbody部分可滚动，且thead部分固定

    1.想要实现表格的thead部分固定切tbody部分可滚动,就需要将thead与tbody进行分离,具体做法是 1.设置thead,tbody都为display:block: 2.设置th与td的宽度 ...

  3. table头部、尾部固定;中间内容定高自适应滚动

    table头部.尾部固定;中间内容定高自适应滚动 很多时候,需要使用到表格做数据分析,不管是前端展现,还是后台管理系统节点展现 工作过程中遇到了,作为一个小笔记,备忘! 如下图所示 --------- ...

  4. div+css实现表头固定内容滚动表格

    <div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...

  5. table之thead兼容

    今天遇到一个小bug,是关于table中thead,tbody,tfoot的兼容问题: 在开发的时候为了方便写样式,我就把表格的标题部分关于th的内容放在了thead中,当然了,我也没有写tbody和 ...

  6. Html table、thead、tr、th、td 标签

    Html table.thead.tr.th.td 标签 案例一 <!-- table 表格标签,配置表格使用.border="1" 添加表格框架 --> <ta ...

  7. css设置背景固定不滚动效果的示例

    css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...

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

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

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

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

随机推荐

  1. 【转】PL/SQL Developer使用技巧、快捷键

    原文链接:PL/SQL Developer使用技巧.快捷键 1.类SQL PLUS窗口:File->New->Command Window,这个类似于oracle的客户端工具sql plu ...

  2. jquery中onclick内$(this)指向

    jquery中onclick=”fn”中$(this)所代表的对象 js方法 function qiehuan(){ var src = $(this).attr(“data”); alert($(t ...

  3. 织梦DedeCMS网站地图模板

    亲和百度蜘蛛,分页多层次特色,织梦系统最好用的网站地图! 用 DedeCMS(织梦) 系统搭建的网站多数都是以优化为主要目标的网站类型,既然是优化站 SEO 手段就离不开为网站设置网站地图.可是 De ...

  4. MAC 终端快捷建

    常用的快捷键: Ctrl + d        删除一个字符,相当于通常的Delete键(命令行若无所有字符,则相当于exit:处理多行标准输入时也表示eof) Ctrl + h        退格删 ...

  5. HDU1004 （数组元素出现最多）

    HDU1004 思路:求数组中出现次数最多的那个元素: 遍历数组元素,找出每个元素出现的次数 Input Input contains multiple test cases. Each test c ...

  6. 1500: [NOI2005]维修数列

    Description Input 输入的第1 行包含两个数N 和M(M ≤20 000),N 表示初始时数列中数的个数,M表示要进行的操作数目.第2行包含N个数字,描述初始时的数列.以下M行,每行一 ...

  7. 加密算法 - RSA算法一

    RSA算法原理(一)  声明: 本文转自 -- 作者: 阮一峰 (http://www.ruanyifeng.com/blog/2013/06/rsa_algorithm_part_one.html) ...

  8. Ubuntu/Linux下7款轻量级编辑器 (转)

    From http://www.feiyan.info/39.html 在Windows卧铺使用Zend Studio或者EditPlus写PHP,Zend Studio适合大项目,EditPlus配 ...

  9. 【UVA 1380】 A Scheduling Problem (树形DP)

    A Scheduling Problem   Description There is a set of jobs, say x1, x2,..., xn <tex2html_verbatim_ ...

  10. OA学习笔记-006-SPRING2.5与hibernate3.5整合

    一.为什么要整合 1,管理SessionFactory实例(只需要一个) 2,声明式事务管理 spirng的作用 IOC 管理对象.. AOP 事务管理.. 二.整合步骤 1.整合sessionFac ...