<ruby id="b9nlj"><var id="b9nlj"></var></ruby>
<span id="b9nlj"><noframes id="b9nlj">
<ruby id="b9nlj"></ruby><address id="b9nlj"><ruby id="b9nlj"><thead id="b9nlj"></thead></ruby></address>
<th id="b9nlj"></th>
<th id="b9nlj"></th>
<th id="b9nlj"></th>
<progress id="b9nlj"><noframes id="b9nlj"><span id="b9nlj"></span>
<progress id="b9nlj"><noframes id="b9nlj"><progress id="b9nlj"></progress>
<span id="b9nlj"></span>

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
窝窝午夜看片成人精品
<ruby id="b9nlj"><var id="b9nlj"></var></ruby>
<span id="b9nlj"><noframes id="b9nlj">
<ruby id="b9nlj"></ruby><address id="b9nlj"><ruby id="b9nlj"><thead id="b9nlj"></thead></ruby></address>
<th id="b9nlj"></th>
<th id="b9nlj"></th>
<th id="b9nlj"></th>
<progress id="b9nlj"><noframes id="b9nlj"><span id="b9nlj"></span>
<progress id="b9nlj"><noframes id="b9nlj"><progress id="b9nlj"></progress>
<span id="b9nlj"></span>