css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Demonstrating another way to make a responsive table that is also keyboard accessible.

Comments

  1. Nice post, but the tbody not scrollable if the content length increased.

  2. @WebTechie, can you clarify? The table itself does not scroll, just the container. And what content length? Within the table or elsewhere? A forked pen showing the problem would be great!

  3. @aardrian if your wrapper div is supposed to scroll (you have CSS set to overflow: auto), you'd need to have a height and/or max-height set to it. As it is right now, you can add as many rows to the table as you'd like, and the only scrollbar you get it the main one. I'm assuming that's what @WebTechie was talking about. :)

  4. @bdean531, ah. Gotcha. The scrolling in this example is only for width, since most cases where I see people have trouble with tables is at narrow viewports. Vertical scrolling is a potential concern, but in user testing that confounds users (generally fixed headers as the page scrolls work better), but that is outside the scope of what I am trying to represent here.

  5. @aardrian Makes sense! I tried shrinking the width, and I never saw a scrollbar ( just the table re-structuring ), so I just assumed that's what @WebTechie was talking about... although you know what they say about assuming lol. I agree, for most real world situations, fixed headers/columns works much better. We deal with a lot of very large reports here at work ( 100+ columns ), so I fix things all over the place to help our users.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...