Menu icon Foundation
Responsive Table scrollbars?

I am looking to create a responsive table and I have used the example "very long 1st cell" example as a base from the url below. My question is how do I get a scrollbar to appear for the first column just as the second column has when viewed on mobile devices ?

http://zurb.com/playground/projects/responsive-tables/index.html

Responsivetablesscrollbartablemobile

I am looking to create a responsive table and I have used the example "very long 1st cell" example as a base from the url below. My question is how do I get a scrollbar to appear for the first column just as the second column has when viewed on mobile devices ?

http://zurb.com/playground/projects/responsive-tables/index.html

Rafi Benkual over 4 years ago

I think you're looking for the .pinned class. That controls the styling for the first column.

<div class="pinned">

Make sure the overflow property is set to auto. That should create a scrollbar.
About overflow properties - https://css-tricks.com/almanac/properties/o/overflow/

This my need vendor prefixes to show.

About vendor prefixes http://peter.sh/experiments/vendor-prefixed-css-property-overview/

Jeff Richards over 4 years ago

Great thank you so much for the help. I thought the "pinned" style was what I was looking for I was just unsure of how to make the scrollbar appear. Much appreciated!

Anke O. almost 4 years ago

Hi, first I want to thank you for letting us use responsive-tables. Everything is working great except I'm also experiencing a non-scrollable first column, which isn't scrollable in your demo either. Since overflow-x is set to scroll and overflow-y to hidden, I can't really think of anything to change. Any ideas?

Regards,
Anke