色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css 固定列頭

林玟書2年前10瀏覽0評論

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 編寫中的一個常見需求,掌握好它的實現方式,可以讓頁面更具可讀性和美觀性。