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>

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