純CSS table表格 thead固定 tbody滾動效果

由於項目需要，在表格中，當數據量越來越多時，就會出現滾動條，而在滾動的過程中，默認情況下表格頭部會跟著表格內容一起滾動，導致看不到頭部對應的字段名，影響體驗效果！

實現思路：

將內容要滾動的區域控制在 tbody 標籤中添加 overflow-y: auto; 樣式，給 tr 標籤添加 table-layout:fixed; (這是核心)樣式，由於 tbody 有了滾動條後，滾動條也要佔位，又會導致 tbody 和 thead 不對齊，所以在設置 tbody 的寬度時要把滾動條的寬度也加上【如果不想顯示滾動條的話，可以把滾動條的寬度設置為0px，滾動條就沒有了。

下面是效果圖，具體完整實例代碼也在下面：

完整實例代碼：

<code>                 <title>純CSS table表格 thead固定 tbody滾動/<title>                 <table>            <caption>純CSS table表格 thead固定 tbody滾動/<caption>                        <thead>                                    序 號                    姓 名                    年 齡                    性 別                    手 機                            /<thead>             <tbody>                                    001                    Name                    28                    女                    Mobile                                                    002                    Name                    28                    男                    Mobile                                                    003                    Name                    28 
                    女                    Mobile                                                    004                    Name                    28                    男                    Mobile                                                    005                    Name                    28                    女                    Mobile                                                    006                    Name                    28                    男                    Mobile                                                    007                    Name                    28                    女 
                    Mobile                                                    008                    Name                    28                    男                    Mobile                            /<tbody>             <tfoot>                                    【table，thead，tbody，tfoot】 colspan：合併行， rowspan：合併列                             /<tfoot>        /<table>    / /<code>

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定製課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習乾貨，各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以關注我的頭條號並在後臺私信我：前端，即可免費獲取。