<track id="p7lll"><strike id="p7lll"><ol id="p7lll"></ol></strike></track>

          <pre id="p7lll"><ruby id="p7lll"><b id="p7lll"></b></ruby></pre>

            <noframes id="p7lll">

              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
              日本公与熄4

                  <track id="p7lll"><strike id="p7lll"><ol id="p7lll"></ol></strike></track>

                      <pre id="p7lll"><ruby id="p7lll"><b id="p7lll"></b></ruby></pre>

                        <noframes id="p7lll">