【发布时间】:2018-01-13 06:43:58
【问题描述】:
我正在使用 Zurb Foundation 编写一个网络应用程序,但遇到了一个小问题。
我需要能够有一个具有固定标题和固定第一列和最后一列的响应式表格,当宽度太小时,其他列之间的列可以滚动。
仅使用 CSS 是否可行?
【问题讨论】:
标签: html css sass zurb-foundation zurb-foundation-6
我正在使用 Zurb Foundation 编写一个网络应用程序,但遇到了一个小问题。
我需要能够有一个具有固定标题和固定第一列和最后一列的响应式表格,当宽度太小时,其他列之间的列可以滚动。
仅使用 CSS 是否可行?
【问题讨论】:
标签: html css sass zurb-foundation zurb-foundation-6
查看此JSFiddle 以解决您的问题。
缩小屏幕以查看您想要的效果。唯一的问题是,当标题固定时,它不会向右滚动。您可以从表格中移除fixed-header 类以移除固定标题效果,在这种情况下水平滚动将正常工作。
警告:我个人不推荐这种方法,因为用户必须知道有额外的列需要滚动。此外,用户可能甚至不知道如何显示隐藏的列(水平滚动对于表格来说并不直观)。
替代方案:我认为这种方法背后的基本原理是能够在移动设备上显示一个大表格,在这种情况下,我会推荐一种不同的解决方案,将大表格折叠成一个两列布局。
查看以下 CodePen sn-p。我在我的项目中一直使用这种策略。
【讨论】: