<form id="h5bl5"></form>
        <address id="h5bl5"><listing id="h5bl5"></listing></address>

        <address id="h5bl5"></address>
        <address id="h5bl5"></address>

          <sub id="h5bl5"><listing id="h5bl5"></listing></sub>
          <form id="h5bl5"></form>

          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
          美欲艳乱妇视频

                <form id="h5bl5"></form>
                <address id="h5bl5"><listing id="h5bl5"></listing></address>

                <address id="h5bl5"></address>
                <address id="h5bl5"></address>

                  <sub id="h5bl5"><listing id="h5bl5"></listing></sub>
                  <form id="h5bl5"></form>