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>

  • 相关阅读:
    hrbustoj 2283 heap解题报告
    hrbustoj 2013 Play Game 2(博弈)
    hrbustoj 2130 一笔画(状态压缩)
    hrbustoj 1125 循环小数 II(小数变分数+极限思想)
    FZU 2170 花生的序列(动态规划)
    FZU 2168 防守阵地 I(前n项和的前n项和)
    FZU 2107 Hua Rong Dao(暴力回溯)
    FZU 2122 又见LKity(KMP+返回所有匹配位置)
    socket
    osi七层协议2
  • 原文地址:https://www.cnblogs.com/camilla/p/7582193.html
Copyright © 2011-2022 走看看