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