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?
Check out this JSFiddle for a solution to your problem.
Shrink your screen to see the effect you wanted. The only problem with it is that when the header is fixed it doesn't scroll right. You can remove the fixed-header class from the table to remove the fixed header effect, in which case the horizontal scrolling will work correctly.
WARNING: Personally I wouldn't recommend this approach, because the user would have to know that there are extra columns to be scrolled through. Additionally, the user may not even know how to show the hidden columns (horizontal scrolling is not intuitive for tables).
ALTERNATIVE: I assume that the rationale behind this approach is to be able to show a large table on a mobile device, in which case, I would recommend a different solution of collapsing large tables into a two-column layout.
Check out the following CodePen snippet. I use this strategy all the time in my projects.