We have a couple of similar pages in our web app where each shows merely a data grid for tabular data. They differ only in the type of data to be shown, i.e. with different number and kind of columns.

We have discussed the following options without any conclusion yet.

  1. Make all grids full width no matter how many columns there are.

  2. Make grids only wide enough for their number of present columns.

    a) Narrow grids are horizontally centered.

    b) Narrow grids are left-aligned.

Which one is better suited for the user?

  • This depends on the relation between the data tables and aesthetics of the page. Can you share some background info for more context and some images maybe?
    – jazZRo
    Commented Jun 6, 2023 at 16:00

2 Answers 2


Your second option is the most appropriate; otherwise, if columns are too width, you'll face content floating in your table cells, which will cause a high cognitive load. Columns have to be as wide as needed for the content, which means the entire table must accommodate the necessary space for those columns and nothing more.

As for the sub-items of your second option, I'm not sure if you refer to the position of the table in the layout or the width of the columns in your table. In the first case, it's a design decision; you can center vertically and horizontally if you want, it depends on your design system.

If what you mean is columns in the table, then their content must be aligned according to the type of content. Just in case, here's an excellent resource for data table best practices.

  • Can you explain what you mean with floating? When the text aligns left the last column can just stretch the rest of the width, right?
    – jazZRo
    Commented Jun 6, 2023 at 16:03
  • I mean the content will have a lot of blank space at one of the sides
    – Devin
    Commented Jun 6, 2023 at 16:53

When you consider effort to impact, both options give you the same impact, but Option 2 has way less effort.

The "floating" mentioned by @Devin is definitely what I'm concerned about as well. When your table is too wide, the code that makes the table seat centered horizontally will allow the left/right borders to be off screen. And given that you don't know which pages will overflow, this issue will be fun to keep track of.

Here's a quick design mock up of how the "floating" might look:

Normal centered:

normal look

Overflowing centered (note that rectangle behind is the screen:

overflowing cut off table

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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