I am writing a web app using Zurb Foundation and have come across a small issue.
I need to be able to have a responsive table with a fixed header and fixed first and last columns with the other columns in between being scrollable when the width is too small.
Is this possible with just CSS?
答案 0 :(得分：1)
请查看此JSFiddle以获取问题的解决方案。
缩小屏幕以查看所需效果。唯一的问题是，当标题被修复时，它不会向右滚动。您可以从表中删除fixed-header类以删除固定的标题效果，在这种情况下，水平滚动将正常工作。
警告：我个人不推荐这种方法，因为用户必须知道才能滚动额外的列。此外，用户可能甚至不知道如何显示隐藏的列（水平滚动对表来说不直观）。
ALTERNATIVE：我认为这种方法的基本原理是能够在移动设备上显示一个大表，在这种情况下，我会建议将大表折叠成一个不同的解决方案。两列布局。
查看以下CodePen代码段。我在我的项目中一直使用这种策略。