See the Pen Simple Responsive Table by Eric Karkovack Collapsible Cells with Repositioned Table Headers Special thanks to W3 Schools for the concept. Not necessarily the most elegant way to do things, but at least the content is accessible. Adding a container element with the overflow-x property set to auto will allow for horizontal scrolling on small screens. Here’s a super easy way to give mobile users access to a very wide table. ![]() We’ll also provide a working example so you can see it in action. Let’s explore a few approaches we can take to ensure that data is accessible on every screen. Thankfully there are techniques we can use to make tables more user-friendly on mobile devices. If not handled properly, columns can be cut off and thus unreadable. Still, large tables aren’t always a great experience on mobile screens. They’re still incredibly useful and have been enhanced further by the likes of CSS and jQuery. But it’s still going strong with regards to its original intention: displaying tabular data. The next stage is to add the columns for the content that is longer than the 600 characters, but we still need to ensure that on smaller widths we only have a single column otherwise it would just look peculiar.The venerable HTML table may (thankfully) be long-dead in terms of its use for page layout. Now that we've got the DOM sorted, on to the CSS (please note that this codepen has some styles that do not relate to this answer, so please use only as a guide). Just to be clear, this means that any article less than 600 characters will not have the "column" class applied and anything that has more or equal to 600 characters will not. If the number of characters are equal to or greater than 600 then it adds the class of 'columns' to the containing div. What I'm doing here is using jquery to check the count of the number of characters inside the content div. That's what I'm looking for a JavaScript solution for. The first section's content is too long to fit on one page, so in this case I'm dividing it into rows that fit in the browser's height. Single-column with sidebar for iPad / narrow browser windows Mode 1: Single-column linearized for mobile ![]() To clarify, here are a few images of the intended modes of the responsive design. This problem already? Or if not, do you have any ideas on how to put an Has anyone heard of someone out there that might be tackling Kind of tricky, but I think it's probably doable enough to try.
0 Comments
Leave a Reply. |