<p id="ecxec"></p>
      1. 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
        人妻

          <p id="ecxec"></p>