I have a table of related items. Let's call them orders. Users can select an item from the table and full details will be displayed in a separate section below the table. I move the currently selected item to the top of the table (the items in the table have no natural logical order), but this is insufficient for users to determine which item's details are being displayed. How can I indicate the currently selected item if I'm already using formatting like bold text in my table?


2 Answers 2


Highlighting the entire row should be a good indicator.


download bmml source – Wireframes created with Balsamiq Mockups

Changing the background color (of the row) also helps.


download bmml source


Following up on rk.'s answer, which I think is a good solution given the background you've provided, I would also like to suggest that you don't move a selected item around in the table. Try rk.'s solution out, but stick to highlighting the row, don't move the item. This will most likely be quite confusing and disorientating to the user, and could also be vert frustrating if the item is moved in a scrollable table and the table suddenly scrolls to the top on a user clicking an item.

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.