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>

  • 相关阅读:
    实用机器人设计(六)-建图,导航和路径规划
    实用机器人设计(五)-机器人电机功率选择和减速箱传动比设计
    实用机器人设计(四)-电机和驱动系统基础原理
    实用机器人设计(三)-计算机视觉
    Git 提交文件到Github
    爬虫框架Scrapy
    scrapy终端与核心组件
    图像识别与文字处理
    存储爬虫数据--Mongodb
    并发下载
  • 原文地址:https://www.cnblogs.com/camilla/p/7582193.html
Copyright © 2011-2022 走看看