CSS固定表頭橫向滾動是一種常見的網頁效果,可以讓頁面展現更為美觀舒適的閱讀體驗。固定表頭一般是在數據量比較大的時候應用得比較多,可以通過一些CSS代碼達到效果。
/* 設置thead區域固定位置 */ thead { display: block; position: sticky; top: 0; z-index: 999; } /* 設置tbody區域 */ tbody { display: block; overflow: auto; height: 300px; } /* 設置表格樣式 */ table { border-collapse: collapse; width: 100%; color: #333; font-size: 14px; } table th, table td { padding: 10px; border: 1px solid #ccc; }
以上代碼主要是給thead、tbody和table設置CSS樣式,其中thead實現固定表頭的效果,通過設置position: sticky;top:0;來達到固定在頁面頂部的效果。tbody區域通過設置overflow: auto;來實現滾動條,可以通過調整height的值來達到滾動條的高度。表格的樣式可以根據自己的需求進行設置。
當數據量較大時,設置固定表頭并添加橫向滾動條可以方便用戶查看數據,提高用戶的使用體驗,是網頁設計中的一個重要的技巧。
上一篇jquery1.12手冊
下一篇css 固定頭部 不遮擋