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>

  • 相关阅读:
    Qt全局坐标和相对坐标
    坐标系统
    qt坐标系统见解
    Qt中QGraphics类坐标映射关系详解
    对QT多线程以及事件投递的理解
    Qt中mouseMoveEvent无效
    递归、尾递归
    末日重生
    201314
    归并排序
  • 原文地址:https://www.cnblogs.com/camilla/p/7582193.html
Copyright © 2011-2022 走看看