<label id="lajsl"></label>
    <s id="lajsl"><object id="lajsl"></object></s>

    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
      女女百合av大片在线观看

      <label id="lajsl"></label>
      <s id="lajsl"><object id="lajsl"></object></s>