实现html表头固定，表格内的信息向上滚动

效果如下：

<!doctype html>Table

.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 }

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>

时间： 2024-12-04 13:19:30

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

中奖人员信息向上滚动

最近公司搞一个抽奖转盘,然后下面有个中奖人列表信息,向上滚动的效果,在网上找了好了好多demo,不过他们大部分都有些小问题,因为我的数据第动态添加进来的,所以会导致重复叠加div向上滚动,这样太耗性能了,搞了两天,终于问公司其他同事解决了,下面写出来分享下: 动态添加数据我就不写了这里是个js封装的,类似一jq,到时候直接引进代码里就行了(这个是公共代码,只需放到一个文件夹里) /** */ (function($){ $.fn.myScroll = function(options){ //

ASP.NET 如何固定表格表头(fixed header)

[摘要]本文介绍ASP.NET 如何固定表格表头(fixed header),并提供详细的示例代码供参考. 你在HTML中渲染一张表格(可能是GridView或者Repeater),如果表格的行数太多,你就得向下拖东滚动条,但你一旦向下拖动滚动条,表头的信息就不见了.具体见下图. 向下拖动滚动条后,表头信息消失: 在本文中,我向大家讲解如何固定住表头.网上可以搜索到很多种方法来实现这个功能,但这些方法基本的原理都是一样的.就是利用div,将表头的信息复制到表身之上的一个div中. 1 <div>

表头固定内容可滚动表格的3种实现方法

有时候,我们在开发前端页面过程中,可能会用到这种表格:表头固定不动,表格内容(<tbody>)需要竖直滚动. 像这样的: 还有这样的: 通过研究,我大致总结了以下三种实现办法供大家参考,如果有错误之处敬请指正,也欢迎拍砖!! 一.表格总宽度自动,每列宽度设置统一用<colgroup>设置这种实现方法最简单,只需要用两个表格,一个表格作为表头,另一个表格用<div>包裹并设置该<div>的高度固定,高度溢出可滚动即可.两个表格的列宽用相同的<colgr

. 我要让我的用户向指定的目录上载文件, 把包含在表格内

我要让我的用户向指定的目录上载文件, 把包含在表格内,而上传的脚本是这样的:. 为什么它不工作? A. Y在调用SAVE之前,不能使用表格选择.正确的操作方法是:先将其上传到一个临时文件夹,然后复制并移动到指定目录,如下示:n = Upload.Save "c:\upload" For Each File in Upload.Files File.Copy Upload.Form("Path") & "\" & File.Ext

table表头固定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>固定表格表头</title> <meta http-equiv="X-UA-Compatible" content="IE=7

css表头固定样式的方法

这篇文章主要为大家介绍了css表头固定样式的方法,涉及样式的相关操作技巧,需要的朋友可以参考下本文实例讲述了css表头固定样式的方法.分享给大家供大家参考. 具体实现方法如下: 复制代码代码如下: <style type="text/css">/*表头样式*/.scll {position: relative;top: expression(this.offsetParent.scrollTop);//background: url(../img/tab_15.gif)

Android中自定义ViewGroup实现表格展示学员信息

前一段时间有个Android刚入门的朋友想实现一个表格来展示信息,下面我们通过扩展ViewGroup 来实现一个简单的. 本文通过扩展Android ViewGroup实现表格可用于课程信息,学生信息视图展示,实现表格方式可以用布局拼凑也可以自定义ViewGroup方式实现. 最终效果如下: 首先创建基本模型和Activity public class Student { /** * */ public Student() { // TODO Auto-generated construc

IE,表头固定

<html> <head> <title>表头固定</title> <style type="text/css"> /*表头样式*/ .scll { position: relative; top: expression(this.offsetParent.scrollTop); background-color: #BCF4EC; text-align: center;

前端基础学习-CSS表头固定

纯CSS实现表头固定之所以难,主要在两点.一是占有最大市场份额的IE6不支持position:fixed.另一个,是人们想破头都想在一起表格中实现这种效果.不过外国真的人用纯CSS实现了这种效果,动用了数量惊人的CSS hacks--我觉得,如果搞到代码如此难懂且难扩展,还不如用javascript好了.碰巧今天我也遇到这种需求,换个视角想想,真的搞出来了. 我们知道,CSS是负责表现,HTML是负责结构,同样的结构,换个样式,给人的感觉完全不同,这也说明人的眼睛是很容易受骗.因此前些狂热鼓吹D