zoukankan      html  css  js  c++  java
  • 实现html表头固定,表格内的信息向上滚动

    效果如下:

    <!doctype html>Table

    headerheader 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>
  • 相关阅读:
    asp.net textbox控件readonly为true时,后台取值的问题
    未能加载文件或程序集“ICSharpCode.SharpZipLib, Version=0.86.0.518, Culture=neutral, PublicKeyToken=1b03e6acf1164f73”或它的某一个依赖项
    DataSet与DataReader的比较
    EntityFramwork所有 SSDL 项目都必须以同一提供程序为目标。ProviderManifestToken“2008”不同于以前遇到的“2005”
    路由器wan口连接不上的问题
    Git学习(四)----版本号跳转
    jquery记分牌的插件
    ORACLE 第4节 多表查询
    基于消息机制的异步架构之回调函数注冊
    干货!手把手教你怎样高速了解一个行业--游戏产业概况
  • 原文地址:https://www.cnblogs.com/yuwenjing0727/p/7029248.html
Copyright © 2011-2022 走看看