Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have many tables, actually data grids, where most of the cells will be editable, but some may not depending on the users permissions. I am thinking of using light gray backgrounds on the read-only cells.


share|improve this question
That's a fine solution. FYI, you probably don't want zebra striping AND table borders. They're redundant and often clutter rather than clarify. –  DA01 Aug 14 '13 at 20:38
I am not using zebra stripe, the yellow row is the selected row. In this app you can select one or more rows thereby facilitating bulk editing. –  rdellara Aug 15 '13 at 0:10

4 Answers 4

up vote 14 down vote accepted

Background color is convention. This (hidden) rule will be learned by user soon. But I also recommend to show tooltip when user tries to edit (clicks) read-only cell. Such explicit message prevents guessing or abusing on imaginary non-working functionality.

share|improve this answer
I'd also have the font color be a lighter shade than enabled text. Some sort of gray. –  Josh Aug 21 '13 at 15:44

You're on the right track as long as the shading doesn't interfere with reading the data. You could also forgo the background color (which emphasizes them to a certain extent) and lighten the type color.

A lock icon or pencil with a slash could reinforce your meaning. If an icon is used, I'd keep it fairly subtle and add contrast on hover so your page isn't littered with little icon bugs.

Doing something special with the editable cells seems problematic if it will be the majority.

share|improve this answer

Personally, I like when a user clicks on a row and it reveals the entire row to be what is editable and what isn't editable. If a user clicks on a non-editable cell, all the cells that can be edited will switch to textfields and non-editable stay as is. You can infer that there will prob be edits on that row if they are clicking on one part even if a part that can't be edited.

share|improve this answer

In addition to the background shading, you could display a locked / no-edit icon when the cell is selected.

Consider the "normal flow" for editing a cell:

  1. User sees a cell
  2. User wants to edit the cell
  3. User selects the cell
  4. User makes edits
  5. User saves changes

By displaying a lock icon in step 3, the user gets immediate feedback that the cell is uneditable.

Background shading of course is useful also for immediately indicating which fields are read-only at a glance.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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