CSS table表格 thead固定 tbody滾動效果
由于項目需要,在表格中,當數據量越來越多時,就會出現滾動條,而在滾動的過程中,默認情況下表格頭部會跟著表格內容一起滾動,導致看不到頭部對應的字段名,影響體驗效果!
實現思路:
將內容要滾動的區域控制在 tbody 標簽中添加 overflow-y: auto; 樣式,給 tr 標簽添加 table-layout:fixed; (這是核心)樣式,由于 tbody 有了滾動條后,滾動條也要占位,又會導致 tbody 和 thead 不對齊,所以在設置 tbody 的寬度時要把滾動條的寬度也加上【如果不想顯示滾動條的話,可以把滾動條的寬度設置為0px,滾動條就沒有了。
下面是效果圖,具體完整實例代碼也在下面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>純CSS table表格 thead固定 tbody滾動</title>
<style>
.table-box {
margin: 100px auto;
width: 1024px;
}
/* 滾動條寬度 */
::-webkit-scrollbar {
width: 8px;
background-color: transparent;
}
/* 滾動條顏色 */
::-webkit-scrollbar-thumb {
background-color: #27314d;
}
table {
width: 100%;
border-spacing: 0px;
border-collapse: collapse;
}
table caption{
font-weight: bold;
font-size: 24px;
line-height: 50px;
}
table th, table td {
height: 50px;
text-align: center;
border: 1px solid gray;
}
table thead {
color: white;
background-color: #38F;
}
table tbody {
display: block;
width: calc(100% + 8px); /*這里的8px是滾動條的寬度*/
height: 300px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
table tfoot {
background-color: #71ea71;
}
table thead tr, table tbody tr, table tfoot tr {
box-sizing: border-box;
table-layout: fixed;
display: table;
width: 100%;
}
table tbody tr:nth-of-type(odd) {
background: #EEE;
}
table tbody tr:nth-of-type(even) {
background: #FFF;
}
table tbody tr td{
border-bottom: none;
}
</style>
</head>
<body>
<section class="table-box">
<table cellpadding="0" cellspacing="0">
<caption>純CSS table表格 thead固定 tbody滾動</caption>
<thead>
<tr>
<th>序 號</th>
<th>姓 名</th>
<th>年 齡</th>
<th>性 別</th>
<th>手 機</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Name</td>
<td>28</td>
<td>女</td>
<td>Mobile</td>
</tr>
<tr>
<td>002</td>
<td>Name</td>
<td>28</td>
<td>男</td>
<td>Mobile</td>
</tr>
<tr>
<td>003</td>
<td>Name</td>
<td>28</td>
<td>女</td>
<td>Mobile</td>
</tr>
<tr>
<td>004</td>
<td>Name</td>
<td>28</td>
<td>男</td>
<td>Mobile</td>
</tr>
<tr>
<td>005</td>
<td>Name</td>
<td>28</td>
<td>女</td>
<td>Mobile</td>
</tr>
<tr>
<td>006</td>
<td>Name</td>
<td>28</td>
<td>男</td>
<td>Mobile</td>
</tr>
<tr>
<td>007</td>
<td>Name</td>
<td>28</td>
<td>女</td>
<td>Mobile</td>
</tr>
<tr>
<td>008</td>
<td>Name</td>
<td>28</td>
<td>男</td>
<td>Mobile</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">【table,thead,tbody,tfoot】 colspan:合并行, rowspan:合并列 </td>
</tr>
</tfoot>
</table>
</section>
</body>
</html>
我自己是一名從事了多年開發的web前端老程序員,目前辭職在做自己的web前端私人定制課程,今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨,各種框架都有整理,送給每一位前端小伙伴,想要獲取的可以關注我的頭條號并在后臺私信我:前端,即可免費獲取。
原文鏈接:https://blog.csdn.net/muguli2008/article/details/103787152
格標簽:
table 表格標簽
熟悉表格常用的單詞:
border 邊距,align 格式 :‘ center’ 對齊,cellspacing 單元格與單元格的距離,cellpadding 單元格與內容的距離,wedth 寬度,height 高度,tr 表示:行,th 表示:表頭,td :表示列
編輯表格:
生成表格:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格標簽</title>
</head>
<body>
<table border="" cellspacing="" cellpadding="">
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>20</td>
</tr>
</table>
</table>
</body>
</html>
全棧攻城獅-每日更新原創IT編程技術及日常實用視頻。
主要內容:這是HTML課程的第六課,在這節課程中主要講解一下HTML中body的屬性,以及表格元素。希望大家根據這個教程可以學習一下。
上節回顧
在上節中主要講解了超鏈接和圖片的知識點。上節請戳->網頁前端開發基礎教程05-網頁中插入圖片和超鏈接,界面更絢麗
當然講解的并不是很全面,只是把常用的HTML屬性進行講解了出來,在后期會進行做項目,到時候,直接回顧一下,馬上就能搞懂了。這次直接講解一下HTML中的body屬性以及表格元素。
PS:其實HTML這個東西很簡單,只需要根據對應的元素,學會標簽指的是什么就可以了,就和諜戰片中中的密碼本一樣,按照密碼本書寫對應的格式,寫上去就能直接顯示了。只是學會這種標簽的樣式而已。自己學習HTML也是可以的。最重要的還是進行實踐。
body的屬性
body是整個頁面的主體元素,我們把內容寫入到body元素中,那應該如何設置主體的背景顏色、背景圖片呢?
下面就一一來講解一下。使用Sublime創建一個HTML文件。
設置背景顏色,屬性為bgcolor,值為RGB顏色或者顏色的英文單詞。
2.背景圖片設置,背景圖片照樣可以用路徑的方式寫入到HTML文件中。屬性為background例如:
當然body的屬性值,比較少,而且幾乎不太用,在以后的時候要使用CSS代替這些東西。
表格
表格在網頁中還是很常用的,比如在按照每行數據進行展示的時候,就需要用到表格啦。所以就需要學習一下表格應該如何寫。
OK,我們先建立一個最簡單的學生信息表:
其中table(表格)、tr(一行)、(一個單元格)。這三個時表格最基本的元素。并依次有個上下級嵌套的關系。
表格中的屬性
表格中有很多屬性,正是因為有了這些屬性,才讓表格無比強大。比如在老早的時候,風靡一時的Hao123就是使用表格進行制作的。OK在下節中咱們也會自己制作一個模仿的Hao123第一版,通過table制作。
border
border是邊框的意思,在以后的學習中你肯定會對這個單詞不陌生,因為這個單詞真的是太常用了。border有兩個值分別為0和1.0表示“沒有邊框”,1表示“有邊框”。
cellpadding:
這個表示的是表格的內邊距,也就是表格的邊框到里面的內容的距離。
數值越大,單元格的表框到內容的距離越大。
cellspacing
這是單元格和單元格之間的距離,這個值越大,單元格之間的距離越大。
align:
align表示的是單元格的對齊方式,對里面的內容進行水平的對齊,其值有三個分別為right(右)、center(居中)、left(左)。
colspan、rowspan:
這是兩個屬性,分別表示行的合并和列的合并。其值為數字,表示要合并的單元格:
還有其他幾個屬性例如:valign、bgcolor、width、height等在前課程中也講過了。
每天一個知識點,帶你邁向軟件編程大神,一起努力吧。下節課程,我們一起做一個Hao123的導航頁面。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。