I'm trying to make evident the correlation between the selection of a main table and it's drilldown panel.

When you open the page, you see just the first panel. Once you click one of the table rows, a drilldown panel appears. With this flow, the correlation is clear.

But what if the user open a link where the drilldown panel is already opened? Or if he see a screenshot?

How could I improve the correlation between the two?


  • Why not use the selection itself as the header and drill down below the selection, inside the table itself. With some clever background coloring it becomes obvious where the content is coming from. If you have too much content though, it may become obnoxious so choose carefully for your situation. Jun 8, 2015 at 20:04
  • totally off topic: are you the guy behind Bootstrap Material?
    – Devin
    Jun 11, 2015 at 19:17
  • @Devin yes I am.
    – Fez Vrasta
    Jun 12, 2015 at 7:47
  • @AndrewG Thanks, but my drilldown is way to big to being placed inside the table :(
    – Fez Vrasta
    Jun 12, 2015 at 7:48

2 Answers 2


If you're not limited by horizontal space you could move details to right. enter image description here

But if you're limited by space and technology, you could add a line connecting active row with details and use same highlight color (you could also consider meaningful animation which shows the line first and then the box with details).

enter image description here

  • Thanks for the ideas! Unfortunately the first solution can't work on my UI because the drilldown panel is very very big and the table has lot of columns... The second idea is probably the best, but again, I can't use it because my team don't want to "waste" that space on the right :/
    – Fez Vrasta
    Aug 15, 2015 at 10:41
  • You can make the connecting line very small, like 2px. This can still convey the relation between items. Aug 15, 2015 at 18:12

You have not specified which technology you are using, but by writing "...open a link...", I presume it is about html/css/js.

I can think of three types of highlighting.

  1. Adding an .active: You could add a class, which somehow highlights the drilldown, by using a correlating color, changing font weight, adding shadow or/and transformations. This all can be done by css.

  2. Adding an .inactive: Reduce the visibility, alpha and color of the inactive sections.

  3. Implement icons: By using icons you could show the user that a certain entity is open. Examples could be an open and closed folders, triangle arrows or plus/minus etc. Font Awesome is a nice example to accomplish that.

In case of "...open a link...": If for example an anachor is already set, instead of already display the drilldown on load, you could set a timeout, scroll to the section, open it and let it flicker once. This can be easily done by jQuery.

The position of the drilldown should be inside of the table rows. Also do not overdo it. Sometimes less is more.

Bootstrap has some buildin functions to accomplish your thoughts. Maybe you should take a look.

  • the most important part is the In case of "...open a link..." because it should work both if user open link or if user see screenshot.. And your solution doesn't handle both :(
    – Fez Vrasta
    Jun 9, 2015 at 11:01
  • If a user opens a link i would trigger a js event which hints the user "this section is open". The "this drill down is connected with that section" should be done by css, independently of the state. This way a screenshot will show the connection too. An very simple example of an collapse can be found here: jsfiddle.net/zGRSF
    – Mruf
    Jun 9, 2015 at 16:00

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.