• 万华禾香板:一根秸秆的绿水青山梦 2019-05-16
  • 石林旅行地中国国家地理网 2019-05-12
  • 湖州吴兴东部新城唱响觅才“四季歌” 2019-05-12
  • 风水神话更危险的事,就是眼瞎,根本分不清谁对谁, 2019-05-11
  • 匠心直播官网一振兴重庆传统手工艺 2019-05-11
  • 曹应旺:毛泽东的自信观 2019-04-30
  • “穿过高考,我在这里等你” 人民网联合众高校喊话高考生 2019-04-18
  • 【改革印记——看中国发展】“电话情缘”中的改革发展印记 2019-04-18
  • 探访ICU病房里的“特种兵”|No.434 2019-03-27
  • 花莲地震受伤大陆游客离台返京 2019-03-13
  • 日本:驻日美军一架F 2019-03-13
  • 长三角铁路午后迎首波客流高峰 个别车次票较紧张 2018-12-24
  • 墨西哥地震与球队进球民众跳跃啥关系?专家:无关 2018-12-24
  • 排球大比分积分:CSS设置table下tbody滚动条与thead对齐的方法

    2016-01-15 13:51:56来源:排球比分直播捷报网作者:icech

    排球比分直播捷报网 www.pwgq.net 客户有个需求,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-16
  • 石林旅行地中国国家地理网 2019-05-12
  • 湖州吴兴东部新城唱响觅才“四季歌” 2019-05-12
  • 风水神话更危险的事,就是眼瞎,根本分不清谁对谁, 2019-05-11
  • 匠心直播官网一振兴重庆传统手工艺 2019-05-11
  • 曹应旺:毛泽东的自信观 2019-04-30
  • “穿过高考,我在这里等你” 人民网联合众高校喊话高考生 2019-04-18
  • 【改革印记——看中国发展】“电话情缘”中的改革发展印记 2019-04-18
  • 探访ICU病房里的“特种兵”|No.434 2019-03-27
  • 花莲地震受伤大陆游客离台返京 2019-03-13
  • 日本:驻日美军一架F 2019-03-13
  • 长三角铁路午后迎首波客流高峰 个别车次票较紧张 2018-12-24
  • 墨西哥地震与球队进球民众跳跃啥关系?专家:无关 2018-12-24