CSS表格下拉頭部固定是一種非常實用的技術,可以讓頁面上的表格在滾動時保持表頭的固定位置,使得用戶在查看大量數據時更加方便。
table { width: 100%; border-collapse: collapse; table-layout: fixed; } thead { display: table-header-group; } tbody { display: block; overflow: auto; height: 300px; /* 設置表格高度 */ } td, th { width: 120px; border: 1px solid #000; padding: 8px; text-align: center; } th { position: sticky; top: 0; /* 固定表頭位置 */ background-color: #fff; }
代碼中需要注意的一點是,表格的tbody需要設置為display:block和overflow:auto,將表格列和內容分離,使得表頭可以單獨固定。此外,為了避免表格內容溢出,可以設置表格高度,并在tbody中使用滾動條。
最后,需要設置表頭th的position:sticky和top:0,這樣即可實現表頭固定的效果。同時,也可以對表頭進行樣式修飾,使得整個頁面更加美觀。
上一篇css表格內邊框怎么加
下一篇css表頭屬性