Zurb Foundation - 响应式 table 固定 header 并且第一列和最后一列固定
Zurb Foundation - Responsive table with fixed header and fixed first and last column
我正在使用 Zurb Foundation 编写 Web 应用程序，遇到了一个小问题。
我需要能够有一个响应式 table 和一个固定的 header 和固定的第一列和最后一列，当宽度太小时，其他列之间可以滚动。
仅 CSS 这可能吗？
查看这个 JSFiddle 来解决您的问题。
缩小屏幕以查看您想要的效果。唯一的问题是，当 header 固定后，它不会向右滚动。您可以从 table 中删除 fixed-header class 以删除固定的 header 效果，在这种情况下水平滚动将正常工作。
警告：我个人不推荐这种方法，因为用户必须知道还有额外的列滚动浏览。此外，用户甚至可能不知道如何显示隐藏的列（水平滚动不直观 tables）。
备选方案： 我假设这种方法背后的基本原理是能够在移动设备上显示大 table，在这种情况下，我建议将大型 table 折叠成 two-column 布局的不同解决方案。
查看以下 CodePen 代码段。我在我的项目中一直使用这个策略。
我正在使用 Zurb Foundation 编写 Web 应用程序，遇到了一个小问题。
我需要能够有一个响应式 table 和一个固定的 header 和固定的第一列和最后一列，当宽度太小时，其他列之间可以滚动。
仅 CSS 这可能吗？
查看这个 JSFiddle 来解决您的问题。
缩小屏幕以查看您想要的效果。唯一的问题是，当 header 固定后，它不会向右滚动。您可以从 table 中删除 fixed-header class 以删除固定的 header 效果，在这种情况下水平滚动将正常工作。
警告：我个人不推荐这种方法，因为用户必须知道还有额外的列滚动浏览。此外，用户甚至可能不知道如何显示隐藏的列（水平滚动不直观 tables）。
备选方案： 我假设这种方法背后的基本原理是能够在移动设备上显示大 table，在这种情况下，我建议将大型 table 折叠成 two-column 布局的不同解决方案。
查看以下 CodePen 代码段。我在我的项目中一直使用这个策略。