<form id="8vrow"><tr id="8vrow"></tr></form>

    <em id="8vrow"><object id="8vrow"></object></em>
    <rp id="8vrow"></rp><dd id="8vrow"><track id="8vrow"></track></dd>

  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