<!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;
    }

    table thead, tbody tr {
        display:table;
        width:100%;
        table-layout:fixed;
    }

    table thead {
        width: calc( 100% - 1em )
    }
    table thead th{ background:#ccc;}
</style>
</head>

<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. 解决修改SQL SERVER 默认1433端口 访问出错的问题；

    1. 如何修改 数据库默认的 1433端口: SQL SERVER 配置管理器中 SQLSERVER 网络配置 xxx数据实例的协议中的  TCP/IP 中 默认端口 都修改为 自己定义的端口 例如 ...

  2. 【python】【转】if else 和 elif

    else和elif语句也可以叫做子句,因为它们不能独立使用,两者都是出现在if.for.while语句内部的.else子句可以增加一种选择:而elif子句则是需要检查更多条件时会被使用,与if和els ...

  3. HTML 页面加载动画效果

    浏览器:Chrome, IE <!doctype html> <html> <head> <title>CSS transform: CSS only ...

  4. 成为IT经理必备的十大软技能

    对于一个IT从业者,让你谋得工作的也许是技术能力,但有助于提升职业生涯的却是软技能.步步高升的人都是那些发表文章.在会议上积极发言以及关注客户的员工(程序员).与此同时,通常情况下,企业CIO或多或少 ...

  5. 分享 - Social.framework

    /** *  第三方分享 * *  @param void 友盟分享 *  @param shareSDK *  @param 百度分享 */ #import "ViewController ...

  6. scanf格式控制符

    格式控制 . %d %o %x %c %s %f %e 无%u格式.%g格式 . scanf("%3d%3d", &a, &b); 输入: //a=123,b=45 ...

  7. 存储过程&Function

    存储过程&Function 编号 类别 ORACLE MYSQL 注释 1 创建存储过程语句不同 create or replace procedure P_ADD_FAC(   id_fac ...

  8. python之---类和实例

    类和实例: 面向对象最重要的概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如Student类,而实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法,但 ...

  9. Spring 自动装配

    1.自动装配有 bytype 和byName两种模式. 2.可以使用autowire属性指定自动装配的方式,byName根据bean的名称和当前bean的setter风格属性进行自动装配:byType ...

  10. PYTHON--CLASS

    class Robot: population = 0 def __init__(self, name): self.name = name print("(Initializing {0} ...