- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hello CSS Tricks forum community:
Chris Coyier recently presented four possible solutions (squish, scroll, collapse rows, collapse columns) for responsive HTML Tables:
https://css-tricks.com/accessible-simple-responsive-tables/
I have decided to go with scroll for the web-page I’m working on. I am also using w3schools as a resource for reference: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_table_responsive
You may notice the classes in my td elements are rather cryptic. That is because I used a table generator.
Here is my reduced test case: http://codepen.io/Angeles4four/pen/eBadNQ
My test case doesn’t scroll the way it should like it does at the w3schools link. My question: Why is that? And can any of you figure out how to make my pen scroll nicely left and right the way the w3school demo does?
Thanks for your attention.
It doesn’t scroll (yet) because the cell contents can comfortably wrap at narrow widths. This is the natural behaviour of tables/tds with % widths – their columns contract as the screen width does until their contents can’t wrap anymore (yours can). If your table had many more columns – like in the w3schools demo – it would eventually stop contracting and begin to scroll horizontally too. To see the scroll in your CodePen, you can specify a min-width (maybe on the table element or on the cells for the 2 columns that hold larger amounts of text) that the table can’t contract past at narrow widths.