CSS 是一種層疊樣式表語言,常用于為網頁添加樣式和布局。它可以控制頁面中的各個元素的顯示效果,可以使頁面的排版變得更加美觀和專業。
其中,固定列頭是 CSS 中一個非常重要的功能。固定列頭可以使得表格在滾動時,表頭依舊保持在可視化區域,方便用戶查看。下面是一段示例代碼:
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; }
以上代碼是一個基本的固定列頭的 CSS 樣式。通過設置表格的 position 屬性及每個元素的 display 屬性,使得表格可以在滾動時保持表頭不變。此外,還通過設置偽元素來實現滾動條的美化,增強視覺效果。
總之,固定列頭是 CSS 編寫中的一個常見需求,掌握好它的實現方式,可以讓頁面更具可讀性和美觀性。