CSS固定表是一種非常有用的技術(shù),它可以使表保持在頁面的某個(gè)位置,使得在頁面上滾動(dòng)時(shí)表格的頭部和左邊始終可見。
table { position: relative; } thead { position: -webkit-sticky; position: sticky; top: 0; background-color: #fff; } th:first-child { position: -webkit-sticky; position: sticky; left: 0; z-index: 1; background-color: #fff; }
以上CSS代碼可以實(shí)現(xiàn)表格頭部和第一列的固定,首先將表的position設(shè)為relative,然后將thead的position設(shè)為sticky,top設(shè)為0,將表頭固定在頂部。接著將第一列的th的position也設(shè)為sticky,left設(shè)為0,將第一列固定在左側(cè)。
使用CSS固定表可以給用戶更好的用戶體驗(yàn),特別是當(dāng)表格非常大的時(shí)候。這種技術(shù)也非常適用于需要分析表格數(shù)據(jù)的應(yīng)用程序。在實(shí)際工作中,很多時(shí)候需要使用CSS固定表,而且它也非常容易實(shí)現(xiàn)。只需要幾行CSS代碼就可以讓表格始終保持在頁面的頂部和左側(cè)。