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>

  • 相关阅读:
    [转载] 常用CASE工具介绍
    GridView, DataGrid 中,DataFormatString语法汇总
    [轉]SQL Server中数据类型详解
    强烈推荐asp.net数据访问的官方指南系列 (Data Access Tutorials)
    实现iFrame自适应高度,原来很简单!
    [转]Web service到底是什么?在什么情况下,你应该使用web service
    贴一个查询SQL Server数据库中所有表及其描述(Description)的SQL语句
    C#中,String和string的区别
    ERWin 连接SQL Sever2005的问题
    [转载]ERwin相关概念入门
  • 原文地址:https://www.cnblogs.com/camilla/p/7582193.html
Copyright © 2011-2022 走看看