zoukankan      html  css  js  c++  java
  • table实现表头固定

    复制代码
     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{100%; height:300px;overflow-y:scroll;}
    3 .table-head table,.table-body table{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;

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

  • 相关阅读:
    LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
    RTSP可用网络流
    Linux访问Github缓慢
    Ubu18.0-NVIDIA显卡驱动重装
    FFMPEG第一次学习
    QT-守护程序
    QT-局域网探测工具(简易版)--Ping
    QT-notepad++仿写
    Ubuntu 解压文件
    Ubuntu -换源
  • 原文地址:https://www.cnblogs.com/gxywb/p/10234707.html
Copyright © 2011-2022 走看看