Best way to Display Responsive Tables on Small Breakpoints?


  • QA Engineer

    I have a web-based dashboard with several tables spanning 80% of the page width.

    Its a very typical responsive table design. A few columns (3-10), many rows (up to 100+), pagination, search filters etc.

    S/N Name Status Timestamp Description Type Content Comment
    1 Placeholder Enabled 2022-22-22 This is an example sentence A XYZ This is a comment.
    ... ... - - - - - -

    Due to the nature of our product, some users like to minimize this table (to approx. 500px width, or fill about 30% of the screen) to use as a supplement to another window which occupies most of the screen.

    Without giving too much details, this is an example of how they like to use our dashboard (the window on the right)

    enter image description here

    The problem is that the table becomes a bit squished/compressed, especially if there are many columns (like 10). We implemented a page scroll but it becomes annoying to keep having to scroll.

    Is there a best practice/guidelines to optimize the display of such tables for smaller screen displays, say,



    1. A simpler approach to enhance the user experience is to freeze the first few important columns to provide context as user scroll horizontally. You can refer to Excel on this.
    2. Another option is column grouping, however this might affect your data structure. For example column name: (Sale Price, Cost Price, Total Quantity, On order, Available)

    enter image description here

    You can group the columns according to category: enter image description here

    Hope it helps




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2