<samp id="ztxok"><strong id="ztxok"><u id="ztxok"></u></strong></samp>
    <b id="ztxok"><ins id="ztxok"><u id="ztxok"></u></ins></b><progress id="ztxok"></progress>

      1. <samp id="ztxok"><ins id="ztxok"><ruby id="ztxok"></ruby></ins></samp>

        CSS设置table下tbody滚动条与thead对齐的方法

        2016-01-15 13:51:56来源:威易网作者:icech

        客户有个需求,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
        试看60边摸边吃奶边做
        <samp id="ztxok"><strong id="ztxok"><u id="ztxok"></u></strong></samp>
          <b id="ztxok"><ins id="ztxok"><u id="ztxok"></u></ins></b><progress id="ztxok"></progress>

            1. <samp id="ztxok"><ins id="ztxok"><ruby id="ztxok"></ruby></ins></samp>