zoukankan      html  css  js  c++  java
  • css固定表头,表单内容可以滑动

    <html>
    <head>
        <meta charset="utf-8">
        <title>Table</title>
        <style type="text/css">
            .table{
                100%;
                border-collapse:collapse;
                border-spacing:0;
            }
            table thead, tbody tr {
                display:table;
                100%;
                table-layout:fixed;
            }
            .fixedThead{
                calc( 100% - 1em )
            }
            .scrollTbody{
                display: block;
                height: 262px;
                overflow: auto;
                100%;
                overflow-y:scroll;
            }
            .table td,.table th {
                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;
                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>

  • 相关阅读:
    2013 duilib入门简明教程 -- 自绘控件 (15)
    2013 duilib入门简明教程 -- 部分bug 2 (14)
    2013 duilib入门简明教程 -- 复杂控件介绍 (13)
    Linux学习88 Mysql常见服务搭档-php-fpm基础应用与实战
    Linux学习87 MariaDB高级操作实战
    Linux学习86 MariaDB基础操作实战
    Linux学习85 MariaDB入门实战
    Linux学习84 数据库体系全面介绍-关系型数据库基础
    Linux学习83 互联网架构-LAMP高级应用与企业项目
    Linux学习82 互联网架构-LAMP入门进阶
  • 原文地址:https://www.cnblogs.com/camilla/p/7582193.html
Copyright © 2011-2022 走看看