效果如下：

<!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. iOS系列译文：自定义Collection View布局

    原文出处: Ole Begemann   译文出处: 黄爱武(@answer-huang).欢迎加入技术翻译小组. UICollectionView在iOS6中第一次被介绍,也是UIKit视图类中的一 ...

  2. Laravel核心之IOC和Facade 架构分析1

    控制反转(Inversion of Control) 缩写为IoC 最常见的方式叫做依赖注入 简单说来,就是一个类把自己的的控制权交给另外一个对象,类间的依赖由这个对象去解决. Laravel 中的使 ...

  3. onCreate中获得控件的大小

    @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setC ...

  4. centos7.0 activemq的安装

    1:下载地址http://activemq.apache.org/activemq-590-release.html 2:wget http://archive.apache.org/dist/act ...

  5. 逻辑英语 第四季 Speaking and Listening

    1. 发音的变革 背字典:牛津双解/朗文英汉 a. 如何一分钟变伦敦腔 发音有两种:伦敦腔/其他 生理分析: ① 后置发音:瞬间华丽变声第一步 东方人靠嘴巴发音: 西方人用胸腔发音[有共鸣] 方法1: ...

  6. POJ 2856 Y2K Accounting Bug【简单暴力】

    链接: http://poj.org/problem?id=2586 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=26733#probl ...

  7. 【python】-- paramiko、跳板机（堡垒机）

    paramiko Python的paramiko模块,该模块用于连接远程服务器并执行相关命令,常用于作批量管理使用 一.下载: pip3 install paramiko 源码:查看 二.parami ...

  8. Linux改动hostname的两个办法

    假设你想把主机名改为 linux的话.两中方法: 1. # hostname linux 这样改动了以后马上生效.可是重新启动后就没了 2. # vi /etc/sysconfig/network 改 ...

  9. 显示HTML的版权符号

    最近有小伙伴问©符号在页面显示很小,于是去查看他的源代码 他在HTML代码里对应输入© 那么在页面里应该会正常显示版权符号,可是为什么会出现这种问题呢? 首先我想到页面在设计的时候,用的字体是宋体,就 ...

  10. CVPR 2018:diractNets网络，有残差网络好吗？

    我把我明天讲PPT的材料弄上来了........哈 哈哈