0

I see a lot of excellent advice here regarding how to build mobile-responsive data tables. However, when it comes to large viewports, I'm not finding much. In general, I'm lost about what could be the solutions for my problem explained below. This is a mockup of the view I'm working on. On a ~1200px wide viewport, the table is centered in the page. Below are my concerns:

  1. The section titles are aligned to the left. But when I align them to the data table, it seems there is excessive white space on the page.
  2. Furhtermore, the page is to check server statuses. The table displays various servers, their status (icon), and a description. There's also a legend at the top that tells the user what each icon stands for.
  3. The first 'Lorem Ipsum' section may have 1 or more cards of server alerts data. The below mockup is what it would look like with no current alerts.

I would like to get suggestions on -

Do I center the section headers to align with the data table? Should the info text section below the header be aligned in the center or to the left?

picture of table mockup

2
  • Can't you left align the table as well? – jazZRo Oct 6 '20 at 8:29
  • The right answer has already been posted (limit max width). I just want to add two things: 1. thats more of an UI problem than a UX problem and 2. the table header should follow the content. So text and its header would be left aligned, icons centered and numers right-aligned – tim human Oct 6 '20 at 11:43
1

A common approach is to limit the max page width. This is a very popular solution and you can see that StackExchange itself has a max width of 1100px for its div#content. For aesthetic reasons you might want to choose a value a bit larger than the max table width.

A bit more exotic alternative could be to try to fit two columns of content in the screen.

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.