zoukankan      html  css  js  c++  java
  • 前端html之------>Table实现表头固定

    文章来源于:https://www.cnblogs.com/dacuotecuo/p/3657779.html,请尊重原创,转载请注明出处。

    说明:这里主要实现了表头的固定和上下滚动的滑动实现;时间的原因未对左右滑动进行实现学习和总结,后续会对左右滑动进行实现。

    一、先上代码:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8" />
            <title>表格头部固定</title>
            <style type="text/css">
                .table-head table,.table-body table{width:100%;border-collapse:collapse;}
                .table-head{padding-right:17px;background-color:#999;color:#000;}
                .table-body{width:100%; height:300px;overflow-y:auto;}
                .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}
                
                .table-body table tr td{
                    border:1px solid red;
                    text-align: center;
                }
            </style>
        </head>
    
        <body>
            <div style="100%;">
                <div class="table-head">
                    <table>
                        <colgroup><col span="2" style=" 100px;" /><col /></colgroup>
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>内容</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="table-body">
                    <table>
                        <colgroup><col span="2" style=" 100px;" /><col /></colgroup>
                        <tbody>
                            <tr><td>1</td><td>我只是用来测试的</td></tr>
                            <tr><td>2</td><td>我只是用来测试的</td></tr>
                            <tr><td>3</td><td>我只是用来测试的</td></tr>
                            <tr><td>4</td><td>我只是用来测试的</td></tr>
                            <tr><td>5</td><td>我只是用来测试的</td></tr>
                            <tr><td>6</td><td>我只是用来测试的</td></tr>
                            <tr><td>7</td><td>我只是用来测试的</td></tr>
                            <tr><td>8</td><td>我只是用来测试的</td></tr>
                            <tr><td>9</td><td>我只是用来测试的</td></tr>
                            <tr><td>10</td><td>我只是用来测试的</td></tr>
                            <tr><td>11</td><td>我只是用来测试的</td></tr>
                            <tr><td>12</td><td>我只是用来测试的</td></tr>
                            <tr><td>13</td><td>我只是用来测试的</td></tr>
                            <tr><td>14</td><td>我只是用来测试的</td></tr>
                            <tr><td>15</td><td>我只是用来测试的</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </body>
    </html>

    二、演示:

    序号内容
    1 我只是用来测试的
    2 我只是用来测试的
    3 我只是用来测试的
    4 我只是用来测试的
    5 我只是用来测试的
    6 我只是用来测试的
    7 我只是用来测试的
    8 我只是用来测试的
    9 我只是用来测试的
    10 我只是用来测试的
    11 我只是用来测试的
    12 我只是用来测试的
    13 我只是用来测试的
    14 我只是用来测试的
    15 我只是用来测试的

    三、注意:

    其实关键之处在于

    1、使用了colgroup标签,来对上下两个表格的列宽进行了定义,让他们保持一致。

    2、上边的div .table-head添加了样式padding-right:17px,这个宽度是为了保证跟下边的div .table-body的滚动条保持一致,同时下边的表格.table-body添加了样式overflow-y:scroll;

    只要保证上述两点的话,你也可以做出固定表头的表格来,同时不会发生上下的列不对齐的问题,屡试不爽!

  • 相关阅读:
    cinder支持nfs快照
    浏览器输入URL到返回页面的全过程
    按需制作最小的本地yum源
    创建可执行bin安装文件
    RPCVersionCapError: Requested message version, 4.17 is incompatible. It needs to be equal in major version and less than or equal in minor version as the specified version cap 4.11.
    惠普IPMI登陆不上
    Linux进程状态——top,ps中看到进程状态D,S,Z的含义
    openstack-neutron基本的网络类型以及分析
    openstack octavia的实现与分析(二)原理,架构与基本流程
    flask上下文流程图
  • 原文地址:https://www.cnblogs.com/damoblog/p/9556502.html
Copyright © 2011-2022 走看看