CSS 是一種層疊樣式表語言,常用于為網(wǎng)頁(yè)添加樣式和布局。它可以控制頁(yè)面中的各個(gè)元素的顯示效果,可以使頁(yè)面的排版變得更加美觀和專業(yè)。
其中,固定列頭是 CSS 中一個(gè)非常重要的功能。固定列頭可以使得表格在滾動(dòng)時(shí),表頭依舊保持在可視化區(qū)域,方便用戶查看。下面是一段示例代碼:
table { position: relative; border-collapse: collapse; } thead { display: block; position: relative; width: 100%; overflow-x: hidden; } tbody { display: block; width: 100%; overflow-y: scroll; height: 400px; } tbody::-webkit-scrollbar { width: 10px; } tbody::-webkit-scrollbar-track { background: #f1f1f1; } tbody::-webkit-scrollbar-thumb { background-color: #888; border-radius: 20px; border: 3px solid #f1f1f1; } thead >tr { display: flex; } tbody >tr { display: flex; } thead, tbody tr { width: 100%; } thead th, tbody td { flex: 1 1 auto; text-align: left; } thead th:first-child, tbody td:first-child { position: sticky; left: 0; z-index: 2; } thead th { background: #fff; border-bottom: 1px solid #ddd; } tbody td { background: #fff; border-bottom: 1px solid #ddd; }
以上代碼是一個(gè)基本的固定列頭的 CSS 樣式。通過設(shè)置表格的 position 屬性及每個(gè)元素的 display 屬性,使得表格可以在滾動(dòng)時(shí)保持表頭不變。此外,還通過設(shè)置偽元素來實(shí)現(xiàn)滾動(dòng)條的美化,增強(qiáng)視覺效果。
總之,固定列頭是 CSS 編寫中的一個(gè)常見需求,掌握好它的實(shí)現(xiàn)方式,可以讓頁(yè)面更具可讀性和美觀性。