0

I have pages consisting of mainly data tables. So far I'm using a fluid design with Bootstrap's rows/cols. Here is an example:

enter image description here

As you can see at the bottom of the page, table 1 has very wide columns compared to their content, and I was told to change that. But of course if I remove width=100% I get plenty of white space after the table which I don't like either:

enter image description here

Is there some trick to solve this situation?

7
  • Hello, and welcome to UX.SE. I'm afraid the question right now is a bit unclear. What exactly is the question? Could you supplement the question with any wireframes or screenshots? It sounds like this is a big undertaking, and there are perhaps multiple questions to be asked. May 17 at 12:35
  • How do I make this work? – I think it's a too broad question that admits several answers depending on the approach given by the one who responds. Perhaps you should focus the question on a specific problem.
    – Danielillo
    May 17 at 17:10
  • "Putting them side by side doesn't solve the general case" This sounds like you are talking about desktop. Is this correct? It's confusing as written. The tables are not going to be side by side on mobile.
    – Steve
    May 17 at 17:48
  • The application is meant for desktop first. They might have plans to have a mobile version but it's certainly not for tomorrow. May 17 at 18:21
  • Danielillo, I can try to formulate the issue more precisely: My boss doesn't like data-tables to be fluid, as it makes the columns way "too big" compared to their content. But if I remove width=100%, I end up with white space after the table which I find quite ugly, and there is not always stuff that could fill that space. I think I should edit my screenshot and remove table 2 as it only brings confusion to the question. May 17 at 18:35

2 Answers 2

1

Well, too many things to explain, I hope I don't go on too long and make everything understandable.

Don't worry about blank spaces

First of all, don't worry about blank spaces, rather worry about poor distribution. According to the explanation, it's a very technical website, whose content depends on data. If this data is not enough to occupy the entire graphic area of the page, instead of fighting to eliminate the resulting empty spaces, the solution is to find a way to make these spaces as balanced as possible.

This is the structural scheme on page 1:

page 1

This is the structural scheme on page 2:

page 2

In the two images, it is clearly seen that the blank spaces are totally unbalanced: margins, gutters, distances, etc. How to solve it:

Use a structural design

The problem with most web designers is they think of graphic elements above the structural axes on which they are supported. It's like designing a car from the lights, doors, and windshield without thinking about the car body. The title, the buttons, the text, the menu, the dropdowns, the tables, etc, all of these are compositive elements. It's very important to establish a support where to place them. If this support is well structured, no white space will be out of place:

structure

If the design is well structured, the empty "hole" will become part of the design instead of being seen as an error or absence.

Some tricks:

  • Take the objects to place as something secondary (at least in this first step)
  • Find repetitive matching distances
  • Try to make equal partitions: 1/2, 1/3, 1/4, etc.
  • Constantly look for central axes, mainly vertical.

Graphic resources

There are several graphic resources to solve the wide empty spaces, it depends on the design and the objective. I only cite one example of those who have been able to take great advantage of blanks and from which several ideas can be drawn: Swiss editorial design

There are more empty space problems on this page than in the two images in the question:

Swiss

However, the balance is given by a clear structuring, the compensation of visual weights, and some graphic resource, such as the lines that delimit the composition areas, even though these later do not carry any element.

4
  • 1
    Thanks a lot, I think your answer covers most of my current issues as a total beginner in design. Do you use a specialized tool for the structural design? May 17 at 21:40
  • Well, I use to start my projects in vector apps or Photoshop, but today there are some more specific programs for it like Figma
    – Danielillo
    May 17 at 21:52
  • Alright. Will look into it! May 17 at 21:56
  • Also, you probably will find interesting this link about working with grids
    – Danielillo
    May 17 at 23:00
0

If you are looking for something more aesthetically pleasing without such a long table, you could make the lower table match the width of the top table. The easiest way to do this would probably be to add a bootstrap column for the lower table with the same settings as the upper table. Note that you don't need to use up the entire 12 possible spaces in a bootstrap grid.

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.