2
我正在使用Zurb基金會編寫一個Web應用程序,並遇到一個小問題。Zurb基金會 - 響應表與固定標題和固定的第一列和最後一列
我需要能夠有一個固定的標題響應表和固定的第一列和最後一列與其他列之間可滾動寬度太小。
這是可能的只是CSS?
我正在使用Zurb基金會編寫一個Web應用程序,並遇到一個小問題。Zurb基金會 - 響應表與固定標題和固定的第一列和最後一列
我需要能夠有一個固定的標題響應表和固定的第一列和最後一列與其他列之間可滾動寬度太小。
這是可能的只是CSS?
查看此JSFiddle爲您的問題的解決方案。
縮小屏幕以查看所需的效果。唯一的問題是,當頭部固定時,它不會向右滾動。您可以從表中刪除fixed-header
類以刪除固定標題效果,在這種情況下,水平滾動將正常工作。
警告:我個人不推薦這種方法,因爲用戶必須知道有通過滾動額外列。另外,用戶可能甚至不知道如何顯示隱藏列(水平滾動對於表格不直觀)。
ALTERNATIVE:我假定該方法背後的基本原理是,以能夠顯示出大的表在移動設備上,在這種情況下,我建議壓扁較大的表成兩列布局的不同的解決方案。
看看下面的CodePen代碼片段。我一直在我的項目中使用這個策略。