欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS設(shè)置table下tbody的滾動(dòng)條的實(shí)現(xiàn)

  發(fā)布時(shí)間：2018-11-29 16:17:03   作者：阡路陌人   我要評論
這篇文章主要介紹了CSS設(shè)置table下tbody的滾動(dòng)條的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

今天碰到一個(gè)關(guān)于對tabel的表的滾動(dòng)事件，需求是表頭不動(dòng)，改變的是tbody，如果tbody里面的內(nèi)容過多，讓其進(jìn)行滾動(dòng)事件。

首先想到的就是利用css中overflow-y:scroll; 來進(jìn)行內(nèi)容的滾動(dòng)，但是在處理tabel的display狀態(tài)時(shí)，就將tabel表的布局給打亂了，如果給tabel的父級進(jìn)行限制，則這個(gè)表會(huì)進(jìn)行滾動(dòng)。。。

在css上設(shè)置如下代碼就可以了

table tbody {
    display:block;
    height:200px;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch; // 為了滾動(dòng)順暢 
}

table tbody::-webkit-scrollbar {
    display: none; // 隱藏滾動(dòng)條
}

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有滾動(dòng)條，關(guān)鍵是都對齊的純css寫法。 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>轉(zhuǎn)載自·威易網(wǎng)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>手機(jī)號碼</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>瀏陽河就業(yè)</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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論