整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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小時內與您取得聯系。
