• 中国和巴基斯坦将合拍电影《天路》 2019-05-26
  • 陕西新开9个大型商业项目 占西北地区8成 2019-05-25
  • 2018年河北省直机关第一期党支部书记示范培训班圆满结束 2019-05-24
  • 40载情定广彩 终练就“国大师” 2019-05-23
  • 和田县驻村工作队帮助农民收小麦 2019-05-23
  • 吉利帝豪GSe正式上市 最大续航里程460公里 2019-05-22
  • 欧美同学会首届数字经济与人工智能大会将在成都召开 2019-05-22
  • 三代中国版画人的“精专”与“久长” 2019-05-21
  • 数百人吃发芽糙米 三个月收获健康 2019-05-20
  • 呼死你团伙被摧毁 封停83万余个账号抓获210余人 2019-05-20
  • 超级冷门!卫冕冠军德国01墨西哥 终结世界杯首战36年不败纪录 2019-05-19
  • 张德江:着力加强人大对外交往,服务中国特色大国外交 2019-05-19
  • 习近平齐鲁之行的七个感人瞬间 2019-05-18
  • 五组食物搭档营养加倍 好处意想不到 2019-05-18
  • 世界杯热火开赛,火爆荧屏,收视第一 2019-05-17
  • 贵州11选5前三今天:CSS设置table下tbody滚动条与thead对齐的方法

    2016-01-15 13:51:56来源:贵州11选5中奖查询作者:icech

    贵州11选5中奖查询 www.ubztu.tw 客户有个需求,table的表头不动,但是表格内容需要限定高度加上滚动条,如果直接在tbody加上高度和overflow-y:scroll,thead的表头就对不齐。下面就是解决这个问题的方法:

    客户有个需求,table的表头不动,但是表格内容需要限定高度加上滚动条,如果直接在tbody加上高度和overflow-y:scroll,thead的表头就对不齐。下面就是解决这个问题的方法:

    效果如下:

    \

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>威易网CSS教程</title>
    <style>
    table tbody {
        display:block;
        height:195px;
        overflow-y:scroll;
    }

    table thead, tbody tr {
        display:table;
        width:100%;
        table-layout:fixed;
    }

    table thead {
        width: calc( 100% - 1em )
    }
    table thead th{ background:#ccc;}
    </style>
    </head>

    <body>
    <table width="80%" border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>出生年月</th>
        <th>手机号码</th>
        <th>单位</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张三封</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴与四十大盗</td>
      </tr>
      <tr>
        <td>张小三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>腾讯科技</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>浏阳河就业</td>
      </tr>
      <tr>
        <td>张三疯子</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张大三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张三五</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张刘三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
    </tbody>
    </table>
    </body>
    </html>
     

    关键词:css
  • 中国和巴基斯坦将合拍电影《天路》 2019-05-26
  • 陕西新开9个大型商业项目 占西北地区8成 2019-05-25
  • 2018年河北省直机关第一期党支部书记示范培训班圆满结束 2019-05-24
  • 40载情定广彩 终练就“国大师” 2019-05-23
  • 和田县驻村工作队帮助农民收小麦 2019-05-23
  • 吉利帝豪GSe正式上市 最大续航里程460公里 2019-05-22
  • 欧美同学会首届数字经济与人工智能大会将在成都召开 2019-05-22
  • 三代中国版画人的“精专”与“久长” 2019-05-21
  • 数百人吃发芽糙米 三个月收获健康 2019-05-20
  • 呼死你团伙被摧毁 封停83万余个账号抓获210余人 2019-05-20
  • 超级冷门!卫冕冠军德国01墨西哥 终结世界杯首战36年不败纪录 2019-05-19
  • 张德江:着力加强人大对外交往,服务中国特色大国外交 2019-05-19
  • 习近平齐鲁之行的七个感人瞬间 2019-05-18
  • 五组食物搭档营养加倍 好处意想不到 2019-05-18
  • 世界杯热火开赛,火爆荧屏,收视第一 2019-05-17