Zurb基金会 - 响应表与固定标题和固定的第一列和最后一列

问题描述:

我正在使用Zurb基金会编写一个Web应用程序,并遇到一个小问题。Zurb基金会 - 响应表与固定标题和固定的第一列和最后一列

我需要能够有一个固定的标题响应表和固定的第一列和最后一列与其他列之间可滚动宽度太小。

这是可能的只是CSS?

查看此JSFiddle为您的问题的解决方案。

缩小屏幕以查看所需的效果。唯一的问题是,当头部固定时,它不会向右滚动。您可以从表中删除fixed-header类以删除固定标题效果,在这种情况下,水平滚动将正常工作。

警告:我个人不推荐这种方法,因为用户必须知道有通过滚动额外列。另外,用户可能甚至不知道如何显示隐藏列(水平滚动对于表格不直观)。

ALTERNATIVE:我假定该方法背后的基本原理是,以能够显示出大的表在移动设备上,在这种情况下,我建议压扁较大的表成两列布局的不同的解决方案。

看看下面的CodePen代码片段。我一直在我的项目中使用这个策略。

Simple Responsive Table