0

I'm creating a form that is essentially a table. It looks a bit like this:

Table of data

The issue I'm having here is that when you look at it long enough, the vertical lines separating the cells in each row begin to appear misaligned, even though they are not. The following is an example of how things merely appear but not how they are actually laid out in the table:

The red line depicts what you would perceive as a straight rule-line running vertically though the table.

Now, removing the padding from between each row solves this issue, BUT I would like to figure out if there is any other way to solve this problem.

I've also tried removing the border from around each row, but I feel it looks weird. Additionally, I've tried adding a slight grey to every other row, and it actually make the effect worse. I've also tried adding a color background, but to no avail.

4
  • Have you tried to just make all the border colours into a lighter grey instead of every other row? Also, if you are creating a table then why do you want the padding between the rows?
    – Michael Lai
    May 11, 2016 at 22:17
  • I've used every color and shade you can image. It makes only slight differences in how strong the effect becomes. The reason for the padding is pretty complicated. Honestly though, it's not a do-or-die must-have. I am really just curious if there is a way to solve this without removing the padding.
    – invot
    May 11, 2016 at 22:22
  • If what you say about removing the padding being better at solving the problem, then I would say that the only solution is to make the padding as narrow as you can... But out of curiosity, if you inverted the colours do you still get the effect?
    – Michael Lai
    May 11, 2016 at 22:30
  • I completely agree that removing the padding is the simplest and most logical solution, but I'm also looking to provide a second solution to this problem. Inverting the colors, the problem still exists. Something that slightly works to fix the problem is adding vertical stripes to the background, but more through the means of distraction. It's still there, but it takes longer to notice.
    – invot
    May 11, 2016 at 22:39

2 Answers 2

2

Try to reduce any visual noise to eliminate the optical effects. White space is enough for separation. More simple design will draw an eye along the lines and will focus users on the content:
enter image description here

For form you can also use more simple design:
enter image description here

More separated lines:

enter image description here

2
  • This definitely works, but I wanted to see if there is another solution that doesn't involve removing the padding between the boxes that make up the rows. Both these solutions involve doing so (well, the first one in theory doesn't need to, I suppose.)
    – invot
    May 11, 2016 at 22:36
  • 1
    @invot sorry, I missed your requirement for keeping padding. Please look at the padded version, the last image. May 11, 2016 at 23:06
0

I don't know what the content is, but after looking at all your options I think all you really need to do is to join the vertical lines together and it will solve your problem.

enter image description here

You can keep your padding, but essentially it just won't have any styling around it.

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.