Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Styling a responsive table

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #249291
    drone4four
    Participant

    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.

    #249297
    Beverleyh
    Participant

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.