I've just designed a widget - it's a data table with 3 fairly narrow columns. It looks good on mobile and desktop.

On mobile (portrait), it takes up the full width, while on desktop, it uses 50% of the space at 12 column, which is dictated by a grid system.

However, there are "in between" widths where there's not enough space to squeeze in another column but the table becomes too wide and the columns too far apart - for instance just before 8 column breakpoint (599px).

Anyone got any ideas to throw into the pot as to how handle the table as these badly fitting widths?


You have a few options here. Also you can use flex properties to display it nicely.

Option 1: Make the columns narrower; wrap the content in the table cells; reduce the padding

  • Pros: less work
  • Cons: may affect legibility

Option 2: Have one column in the list with names that identify the items in the list. When you click on them a card with more details pops up

  • Pros: optimised for mobile use
  • Cons: more work; need to have two separate media queries for mobile and desktop

Option 3: Horizontal scroll on the bottom of the table

  • Pros: less work
  • Cons: horizontal scrolling not recommended by most UX experts

I would go for option 2.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.