html實作表頭不動的方法:先將內容要捲動的區域控制在tbody標籤中,並新增「overflow-y: auto;」樣式;然後在tr標籤上新增「table-layout: fixed;”即可固定表頭。
本文操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。
HTML table表格固定表格頭tbody加上滾動條
#純CSS table表格thead固定tbody捲動效果
由於項目需要,在表格中,當資料量越來越多時,就會出現捲軸,而在滾動的過程中,預設表格頭部會跟著表格內容一起滾動,導致看不到頭部對應的欄位名,影響體驗效果!
實作想法:
將內容要捲動的區域控制在tbody 標籤中加入overflow-y: auto; 樣式,給tr 標籤添加table-layout:fixed; (這是核心)樣式,由於tbody 有了滾動條後,滾動條也要佔位,又會導致tbody 和thead 不對齊,所以在設定tbody 的寬度時要把滾動條的寬度也加上【如果不想顯示捲軸的話,可以把捲軸的寬度設定為0px,捲軸就沒有了。
下面是效果圖,具體完整實例程式碼也在下面:
#
完整實例程式碼:
<!DOCTYPE html> <html> <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> <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>
【推薦學習:html影片教學】
以上是html怎麼實現表頭不動的詳細內容。更多資訊請關注PHP中文網其他相關文章!