CSS设定table下tbody的翻转条的完成

日期：2021-03-17 类型：科技新闻我要分享

关键词：免费自助建站，手机建站平台，wap建站，免费自助建站平台，H5网站,H5模板建站

今日碰到1个有关对tabel的表的翻转恶性事件，要求是表头没动，更改的是tbody，假如tbody里边的內容过量，让其开展翻转恶性事件。

最先想起的便是运用css中overflow-y:scroll; 来开展內容的翻转，可是在解决tabel的display情况时，就将tabel表的合理布局给打乱了，假如给tabel的父级开展限定，则这个表会开展翻转。。。

在css上设定以下编码便可以了

table tbody {
    display:block;
    height:200px;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch; // 以便翻转畅顺 
}

table tbody::-webkit-scrollbar {
    display: none; // 掩藏翻转条
}

table thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}

table thead {
    width: calc( 100% - 1em )
}
table thead th{ background:#ccc;}

示例:table报表，让thead固定不动，tbody有翻转条，重要是都对齐的纯css写法。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻">
<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>张3</td>
 <td>18</td>
 <td>1990⑼⑼</td>
 <td></td>
 <td>阿里巴巴巴巴</td>
 </tr>
 <tr>
 <td>张3封</td>
 <td>18</td>
 <td>1990⑼⑼</td>
 <td></td>
 <td>阿里巴巴巴巴与410大盗</td>
 </tr>
 <tr>
 <td>张小3</td>
 <td>18</td>
 <td>1990⑼⑼</td>
 <td></td>
 <td>腾迅高新科技</td>
 </tr>
 <tr>
 <td>张3</td>
 <td>18</td>
 <td>1990⑼⑼</td>
 <td></td>
 <td>浏阳河学生就业</td>
 </tr>
 <tr>
 <td>张3疯子</td>
 <td>18</td>
 <td>1990⑼⑼</td>
 <td></td>
 <td>阿里巴巴巴巴</td>
 </tr>
 <tr>
 <td>张3</td>
 <td>18</td>
 <td>1990⑼⑼</td>
 <td></td>
 <td>阿里巴巴巴巴</td>
 </tr>
 <tr>
 <td>张大3</td>
 <td>18</td>
 <td>1990⑼⑼</td>
 <td></td>
 <td>阿里巴巴巴巴</td>
 </tr>
 <tr>
 <td>张35</td>
 <td>18</td>
 <td>1990⑼⑼</td>
 <td></td>
 <td>阿里巴巴巴巴</td>
 </tr>
 <tr>
 <td>张刘3</td>
 <td>18</td>
 <td>1990⑼⑼</td>
 <td></td>
 <td>阿里巴巴巴巴</td>
 </tr>
 <tr>
 <td>张3</td>
 <td>18</td>
 <td>1990⑼⑼</td>
 <td></td>
 <td>阿里巴巴巴巴</td>
 </tr>
</tbody>
</table>
</body>
</html>

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：怎样将index.html设定为网站默认设置主页文档返回下一篇：没有了