效果如下：

<!doctype html>Table

header header two
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2

源码如下：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>Table</title>

    <style type="text/css">

        .table{

            width: 100%;

            border-collapse:collapse;

            border-spacing:0;

        }

        .fixedThead{

            display: block;

            width: 100%;

        }

        .scrollTbody{

            display: block;

            height: 262px;

            overflow: auto;

            width: 100%;

        }

        .table td,.table th {

            width: 200px;

            border-bottom: none;

            border-left: none;

            border-right: 1px solid #CCC;

            border-top: 1px solid #DDD;

            padding: 2px 3px 3px 4px

        }

        .table tr{

            border-left: 1px solid #EB8;

            border-bottom: 1px solid #B74;

        }

        thead.fixedThead tr th:last-child {

            color:#FF0000;

            width: 218px;

        }

    </style>

</head>

<body >

    <table class="table">

        <thead class="fixedThead">

            <tr><th>header</th><th>header two</th></tr>

        </thead>

        <tbody class="scrollTbody">

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

            <tr><td>fuck 1</td><td>fuck 2</td></tr>

        </tbody>

    </table>

</body>

</html>

实现html表头固定，表格内的信息向上滚动的更多相关文章

  1. Javascript 固定表格表头

    遇到一个简单的需求: 客户有一个表格可能有很多内容,当内容很多的时候,表格就会出现滚动条 客户希望当表格内容很多时,只滚动表格而不滚动浏览器窗口 在网上找到很多相关的插件,要不就是太复杂,要不就是满足 ...

  2. css固定表格表头(各浏览器通用)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  4. DataTables固定表格宽度（设置横向滚动条）

    当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...

  5. html css 如何将表头固定（转）

    html css 如何将表头固定 position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时 ...

  6. html Table实现表头固定

    最近一直在搞前台琐碎的东西,也学习了一下linux,没有时间对新的东西进行深入的研究和学习,没有写博客,不过归咎其原因还是在于自己的惰怠. 废话不多说,今天想将一个前台页面设计的一个小东西分享一下,那 ...

  7. 纯CSS实现table表头固定（自创备忘）

    因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...

  8. easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）

    easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行 最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...

  9. html css 如何将表头固定

    position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时必须解决两个问题.第一:表体将随之 ...

随机推荐

  1. nginx反向代理做cache配置

    前序:请耐性子看完,前面的这个配置可以达到按后缀名进行缓存,但无法被purge.后面的配置可以被purge.具体实施方案按个人情况而定. 需要第三方的ngx_cache_purge模块:wget ht ...

  2. UVA 699 The Falling Leaves （二叉树水题）

    本文纯属原创.转载请注明出处,谢谢. http://blog.csdn.net/zip_fan. Description Each year, fall in the North Central re ...

  3. Java图形界面实战案例——实现打字母游戏

    实现打字母的游戏 这次这个案例能够说是头几次所讲的内容的一个技术汇总,主要是 运用了几大块的知识.我们先来定义一下案例的背景:在一个300*400的窗口上.有10个随机产生的字母下落,在键盘上敲击字母 ...

  4. python 补充:join() , 基本数据类型的增删改查以及深浅拷贝

    #  join() join() 方法用于将序列中的元素以指定的字符连接生成一个新的字符串. li = ["李李嘉诚", "麻花藤", "黄海海峰&q ...

  5. POJ1942

    Paths on a Grid Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 24236   Accepted: 6006 ...

  6. 【BZOJ1000】A+B Problem ★BZOJ1000题达成★

    [BZOJ1000]A+B Problem Description 输入两个数字,输出它们之和 Input 一行两个数字A,B(0<=A,B<100) Output 输出这两个数字之和 S ...

  7. 【BZOJ4033】[HAOI2015]树上染色 树形DP

    [BZOJ4033][HAOI2015]树上染色 Description 有一棵点数为N的树,树边有边权.给你一个在0~N之内的正整数K,你要在这棵树中选择K个点,将其染成黑色,并将其他的N-K个点染 ...

  8. IntelliJ IDEA集成JProfiler，入门教程

    说明: JProfiler是用于分析J2EE软件性能瓶颈并能准确定位到Java类或者方法有效解决性能问题的主流工具,它通常需要与性能测试工具如:LoadRunner配合使用,因为往往只有当系统处于压力 ...

  9. 【HTML5开发系列】表单元素

    <form> 创建一个HTML表单 属性: action 表示提交表单时浏览器应该把用户填写的数据发送到什么地方 method 用来指定表单数据发送到服务器的方式.允许值有get和post ...

  10. Python菜鸟之路：Python基础-生成器和迭代器、递归

    一.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,知道所有的元素被访问完结束.迭代器只能往前不会后退. 1. 迭代器优点 对于无法随机访问的数据结构(比如set)而言, ...