zoukankan      html  css  js  c++  java
  • table 的部分使用,固定行,固定列等

    主要是用多张table表格实现 
    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            table,
            table tr th,
            table tr td {
                border: 1px solid #666;
                text-align: center;
            }
            
            body {
                padding-top: 200px;
                padding-left: 200px
            }
            
            table {
                border-collapse: collapse;
                overflow: auto
            }
            
            .tableOne {
                 100px;
            }
            
            .tableThree {
                 100px;
                /* margin-left: -1px */
            }
            
            .tableTwo {
                 800px;
                /* margin-left: -1px */
            }
            
            td {
                 100px;
            }
            
            .left {
                float: left;
            }
            
            .right {
                float: left;
            }
            
            .center {
                float: left;
                 400px;
                overflow: auto;
            }
        </style>
    </head>
    
    <body>
    
        <div class="left">
            <table class="tableOne">
                <tbody>
                    <tr class="table-row">
                        <td class="table-name">项目基本</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-name">项目基本</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-name">项目基本</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-name">项目基本</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-name">项目基本</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-name">项目基本</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="center">
            <table class="tableTwo">
                <tbody>
                    <tr class="table-row">
                        <td class="table-name">项目基本</td>
                        <td class="table-first">项目基本概况</td>
                        <td class="table-all">-9-</td>
                        <td class="table-score">-9-</td>
                        <td class="table-get">83</td>
                        <td class="table-weight">0.8</td>
                        <td class="table-weiscore">26.4</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-first">团队基本</td>
                        <td class="table-all">9</td>
                        <td class="table-score">9</td>
                        <td class="table-get">83</td>
                        <td class="table-weight">0.8</td>
                        <td class="table-weiscore">26.4</td>
                        <td class="table-weiscore">26.4</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-first">团队n5</td>
                        <td class="table-all">9</td>
                        <td class="table-score">9</td>
                        <td class="table-get">83</td>
                        <td class="table-weight">0.8</td>
                        <td class="table-weiscore">26.4</td>
                        <td class="table-weiscore">26.4</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-first">团队n5</td>
                        <td class="table-all">9</td>
                        <td class="table-score">9</td>
                        <td class="table-get">83</td>
                        <td class="table-weight">0.8</td>
                        <td class="table-weiscore">26.4</td>
                        <td class="table-weiscore">26.4</td>
                    </tr>
    
                    <tr class="table-row">
                        <td class="table-first">团队n5</td>
                        <td class="table-all">9</td>
                        <td class="table-score">9</td>
                        <td class="table-get">83</td>
                        <td class="table-weight">0.8</td>
                        <td class="table-weiscore">26.4</td>
                        <td class="table-weiscore">26.4</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-first">团队n5</td>
                        <td class="table-all">9</td>
                        <td class="table-score">9</td>
                        <td class="table-get">83</td>
                        <td class="table-weight">0.8</td>
                        <td class="table-weiscore">26.4</td>
                        <td class="table-weiscore">26.4</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="right">
            <table class="tableThree">
                <tbody>
                    <tr class="table-row">
                        <td class="table-name">项目基本2</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-name">项目基本2</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-name">项目基本2</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-name">项目基本2</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-name">项目基本2</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-name">项目基本2</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    
    </html>
      
    

      

  • 相关阅读:
    java基础部分的一些有意思的东西。
    antdvue按需加载插件babelpluginimport报错
    阿超的烦恼 javaScript篇
    .NET E F(Entity Framework)框架 DataBase First 和 Code First 简单用法。
    JQuery获得input ID相同但是type不同的方法
    gridview的删除,修改,数据绑定处理
    jgGrid数据格式
    Cannot read configuration file due to insufficient permissions
    Invoke action which type of result is JsonResult on controller from view using Ajax or geJSon
    Entity model数据库连接
  • 原文地址:https://www.cnblogs.com/tiangeng/p/10233341.html
Copyright © 2011-2022 走看看