• html Table实现表头固定


    设计表格的时候,通常都想将表格的头部进行固定,而表格的body部分能够进行滚动的效果。

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

    html代码

     1 <div style=" 800px;">
     2     <div class="table-head">
     3     <table>
     4         <colgroup>
     5             <col style=" 80px;" />
     6             <col />
     7         </colgroup>
     8         <thead>
     9             <tr><th>序号</th><th>内容</th></tr>
    10         </thead>
    11     </table>
    12     </div>
    13     <div class="table-body">
    14     <table>
    15         <colgroup><col style=" 80px;" /><col /></colgroup>
    16         <tbody>
    17             <tr><td>1</td><td>我只是用来测试的</td></tr>
    18             <tr><td>2</td><td>我只是用来测试的</td></tr>
    19             <tr><td>3</td><td>我只是用来测试的</td></tr>
    20             <tr><td>4</td><td>我只是用来测试的</td></tr>
    21             <tr><td>5</td><td>我只是用来测试的</td></tr>
    22             <tr><td>6</td><td>我只是用来测试的</td></tr>
    23             <tr><td>7</td><td>我只是用来测试的</td></tr>
    24             <tr><td>8</td><td>我只是用来测试的</td></tr>
    25             <tr><td>9</td><td>我只是用来测试的</td></tr>
    26             <tr><td>10</td><td>我只是用来测试的</td></tr>
    27             <tr><td>11</td><td>我只是用来测试的</td></tr>
    28             <tr><td>12</td><td>我只是用来测试的</td></tr>
    29             <tr><td>13</td><td>我只是用来测试的</td></tr>
    30             <tr><td>14</td><td>我只是用来测试的</td></tr>
    31             <tr><td>15</td><td>我只是用来测试的</td></tr>
    32         </tbody>
    33     </table>
    34     </div>
    35 </div>

    再看css如下

    1 .table-head{padding-right:17px;background-color:#999;color:#000;}
    2 .table-body{width:100%; height:300px;overflow-y:scroll;}
    3 .table-head table,.table-body table{width:100%;}
    4 .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}

    其实关键之处在于

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

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

        同时下边的表格.table-body添加了样式 overflow-y : scroll ; 

    只要保证上述两点的话,便可以做出固定表头的表格来,同时不会发生上下的列不对齐的问题。(转)

  • 相关阅读:
    POJ2778 DNA Sequence AC自动机+矩阵二分
    POJ1204 Word Puzzles AC自动机 多串匹配
    与失散已久的小学同桌QQ聊天
    ZC公司员工评分系统——后台查询合成DataTable
    软考(2)编译原理
    GCT考试复习
    为自己加油!!!
    ZC公司员工评分系统——前台排版算法
    员工评分系统现场发布小感
    软考(3)操作系统
  • 原文地址:https://www.cnblogs.com/zhongsq/p/4923213.html
Copyright © 2020-2023  润新知