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

赞助商链接:

陕西11选五 广东11选5 500万彩票网 500w彩票 500万彩票网 500万彩票网 500w彩票 500w彩票 500万彩票网 500w彩票 500万彩票网 500万彩票网 <飞卢小说网>| <小说完美盛宴sodu>| <神荒>| <顶点小说网修真世界>| <思路客>| <完美世界最新章节>| <小说无弹窗免费阅读>| <豆豆小说网 言情小说>| <我爱小品网>| <免费的言情小说阅读网>| <大主宰txt全集下载>| <斗牛棋牌>| <小说无弹窗免费阅读>| <玄幻小说完本下载>| <我欲封天 耳根 小说>| <校园全能高手小说>| <有声小说>| <完结全文阅读小说网>| <飞卢小说网>| <惹上首席总裁>| <穿越np小说排行>| <人皇 笔趣阁>|