CSS固定表是一種非常有用的技術,它可以使表保持在頁面的某個位置,使得在頁面上滾動時表格的頭部和左邊始終可見。
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代碼可以實現表格頭部和第一列的固定,首先將表的position設為relative,然后將thead的position設為sticky,top設為0,將表頭固定在頂部。接著將第一列的th的position也設為sticky,left設為0,將第一列固定在左側。
使用CSS固定表可以給用戶更好的用戶體驗,特別是當表格非常大的時候。這種技術也非常適用于需要分析表格數據的應用程序。在實際工作中,很多時候需要使用CSS固定表,而且它也非常容易實現。只需要幾行CSS代碼就可以讓表格始終保持在頁面的頂部和左側。
下一篇css固定段落位置