<!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. 禁止选择文本和禁用右键 v2.0

    禁止鼠标右键(注:在火狐浏览器没有起到效果作用) <script> function stop() { return false }; document.oncontextmenu = s ...

  2. win8 开启wifi

    1,以管理员身份运行命令提示符,输入命令 netsh wlan set hostednetwork mode=allow ssid=networkname key=password后回车 其中ssid ...

  3. PHP源代码分析（第一章）：Zend HashTable详解【转】

    转载于http://www.phppan.com/2009/12/zend-hashtable/ 在PHP的Zend引擎中,有一个数据结构非常重要,它无处不在,是PHP数据存储的核心,各种常量.变量. ...

  4. 单片微机原理P0：80C51结构原理

    本来我真的不想让51的东西出现在我的博客上的,因为51这种东西真的太low了,学了最多就所谓的垃圾科创利用一下,但是想一下这门课我也要考试,还是写一点东西顺便放博客上吧. 这一系列主要参考<单片 ...

  5. js经验1

    1. input 获得焦点  focus(); 2.获得文档的的title _title = document.title; 3.定时检查删除dom定时器 var deleteDomInterval ...

  6. C++ QT中的QSound使用方法

    在pro文件中添加 QT += multimedia 就可以了

  7. Android 程序框架设计

    这篇文章主要内容来自于之前我讲的一个PPT文档,现在将其整理如下.欢迎指正.以下的内容都是来自于我自身的经验,欢迎大家多提自己的建议. 1.一些概念 模式的定义: 每个模式都描述了一个在我们的环境中不 ...

  8. 使AspNetPager控件中文显示分页信息

    在日常的编程过程中,很多学员对于使AspNetPager控件中文显示分页信息不是很清楚,本文将由达内的老师为各位学员介绍一下使AspNetPager控件中文显示分页信息的内容. AspNetPager ...

  9. 查看Mac OSX机器上存在的所有Device

    可以使用instruments -s来查看Mac OSX机器上存在的所有Device,包括模拟器创建的Device以及真实连接的iPad,iPhone等设备.

  10. ChannelFactory.Endpoint 上的地址属性为空。ChannelFactory 的终结点必须指定一个有效的地址。

    主体代码如下 IServiceA proxyA; ChannelFactory<IServiceA> factoryA = new ChannelFactory<IServiceA& ...