CSS設(shè)置table下tbody的滾動(dòng)條的實(shí)現(xiàn)
發(fā)布時(shí)間：2018-11-29 16:17:03 作者：阡路陌人 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS設(shè)置table下tbody的滾動(dòng)條的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
今天碰到一個(gè)關(guān)于對(duì)tabel的表的滾動(dòng)事件，需求是表頭不動(dòng)，改變的是tbody，如果tbody里面的內(nèi)容過(guò)多，讓其進(jìn)行滾動(dòng)事件。
首先想到的就是利用css中overflow-y:scroll; 來(lái)進(jìn)行內(nèi)容的滾動(dòng)，但是在處理tabel的display狀態(tài)時(shí)，就將tabel表的布局給打亂了，如果給tabel的父級(jí)進(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)鍵是都對(duì)齊的純css寫(xiě)法。
<!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ī)號(hào)碼</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áng)河就業(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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
CSS 設(shè)置滾動(dòng)條樣式的實(shí)現(xiàn)
這篇文章主要介紹了CSS 設(shè)置滾動(dòng)條樣式的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-11css設(shè)置Overflow實(shí)現(xiàn)隱藏滾動(dòng)條的同時(shí)又可以滾動(dòng)
這篇文章主要介紹了css設(shè)置Overflow實(shí)現(xiàn)隱藏滾動(dòng)條的同時(shí)又可以滾動(dòng)的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-08-27css 設(shè)置overflow:scroll 滾動(dòng)條的樣式
這篇文章主要介紹了css 設(shè)置overflow:scroll 滾動(dòng)條的樣式 ，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-25- 這篇文章主要介紹了使用CSS隱藏元素滾動(dòng)條的示例代碼,需要的朋友可以參考下2019-07-10
css隱藏移動(dòng)端滾動(dòng)條并且ios上平滑滾動(dòng)的方法
這篇文章主要介紹了css隱藏移動(dòng)端滾動(dòng)條并且ios上平滑滾動(dòng)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-23- 瀏覽器滾動(dòng)條太寬，太丑，影響日常開(kāi)發(fā)怎么辦，本文介紹了如何使用CSS3改變?yōu)g覽器滾動(dòng)條樣式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看2019-01-04
- 這篇文章主要介紹了css滾動(dòng)條樣式修改的代碼,需要的朋友可以參考下2019-10-30
