在進行表格展示數據的時候,往往需要保持表頭和某些列的固定位置,同時可以滑動表格顯示其他內容。這時就需要使用CSS進行處理,讓表格的行列進行凍結。
首先,保持表頭的位置固定。可以通過設置表頭的position屬性為fixed,使其不隨著滾動條移動而改變位置。示例代碼如下:
table thead { position: fixed; top: 0; background-color: #fff; }其中,thead表示表頭部分,top:0表示固定在頁面頂部,background-color: #fff是為了讓表頭背景色透明。 接著,讓某些列的位置固定,同樣是通過設置它的position屬性為fixed,不隨著滾動條移動而改變位置。示例代碼如下:
table td:nth-child(2) { position: fixed; left: 100px; background-color: #fff; }其中,td:nth-child(2)表示第二列,left:100px表示離頁面左側100px,background-color: #fff是為了讓這些列背景色透明。 最后,為了讓可以滾動表格展開其他內容,需要設置表格容器的overflow屬性為scroll。示例代碼如下:
.table-container { overflow: scroll; }其中,.table-container表示包含表格的容器。 綜上所述,通過設置表頭和某些列的position屬性為fixed,以及設置表格容器的overflow屬性為scroll,就可以實現凍結表頭和某些列的效果。
上一篇vue擴展原型方法
下一篇css 圖片沒有間隙