Avoid user interaction on "disabled" table row

Question

I've got an HTML table which has some of its rows 'disabled'. I'd like to show it clearly to the user, so I apply a blur filter to the tr, having a table like this:

NOTE: There's a live example on https://stackblitz.com/edit/angular-cdypks.

The problem is that, although it looks disabled, the user still can interact with it, selecting the text and clicking on the select input. Also, some of the cells are droppable areas where I can drop objects, so I'd like to avoid it.

I wouldn't like to use Javascript, so I wonder if there's a way to place a transparent DIV in front of the disabled tr or something similar...

Thanks!

Even with all 3 of the answers below users will still be able to take and grab the data via "Inspect Element" on the browser console. — Martin, Jun 01 '18 at 08:52

Bogdan Efimenko · Answer 1 · 2018-06-01T11:15:52.060

4

If you want to disable some row, you can use pointer-events: none for this row. It's will prevent any events of mouse in your row.

tr.disabled{
  pointer-events: none;
}

edited Jun 01 '18 at 11:15

answered Jun 01 '18 at 08:44

Bogdan Efimenko

151
1
6

Takit Isy · Accepted Answer · 2018-06-01T12:29:47.040

Assuming your disabled property is on the tr,
I think you can do the following:

/* Some style */
table {
  border-collapse: collapse;
  border: 1px solid gray;
}

th {
  border: 0;
  padding: 2px 20px;
}

td {
  position: relative;
  border: 1px solid gray;
  padding: 8px 20px;
}

/*
  The below adds a veil ABOVE the td elements
  that are in a tr with the "disabled" property.
  If you click, that's on the veil, not on the button
*/
#table1 tr[disabled] td::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
}

/*
  This shorter one should work too:
  It disables the events of your mouse on the tds
  that are in a tr with the "disabled" property.
  (Plus, I added your blur)
*/
#table2 tr[disabled] td {
  filter: blur(1px);
  pointer-events: none;
}

<!-- Not much indentation here only to make the code of the snippet shorter -->
<table id="table1">
  <tr><th>Order</th><th>Name</th><th>Occupation</th><th>Action</th></tr>
  <tr><td>#1</td><td>x</td><td>x</td><td><button>Button</button></td></tr>
  <tr disabled><td>#2</td><td>x</td><td>x</td><td><button>Button</button></td></tr>
  <tr><td>#3</td><td>x</td><td>x</td><td><button>Button</button></td></tr>
</table>
<br>
<table id="table2">
  <tr><th>Order</th><th>Name</th><th>Occupation</th><th>Action</th></tr>
  <tr><td>#1</td><td>x</td><td>x</td><td><button>Button</button></td></tr>
  <tr disabled><td>#2</td><td>x</td><td>x</td><td><button>Button</button></td></tr>
  <tr><td>#3</td><td>x</td><td>x</td><td><button>Button</button></td></tr>
</table>

Note that the button in the disabled row cannot be clicked.

tr[disabled] td::after adds a veil (using ::after pseudo-element) after (so, above) the td elements that are in a tr with the "disabled" property.

Hope it helps!

That's exactly what I was looking for: simple and works like a charm, thanks! — Fel, Jun 01 '18 at 10:15
And better to use class or data-attribute, because "disabled" not allowed for `tr` — Bogdan Efimenko, Jun 01 '18 at 11:22
Can't the user still interact with the row via the keyboard (starting with the Tab key)? — Adam M. Costello, Nov 23 '22 at 22:24

score 1 · Answer 3 · answered Jun 01 '18 at 08:49

1

<tr>
<td><p style="user-select: none;">test</p></td>
<td><input type="button" disabled="disabled"></td>
</tr>

You can try this, you even cant select them with doubleclick

answered Jun 01 '18 at 08:49

Lanki

150
1
10

score 0 · Answer 4 · answered Jun 01 '18 at 08:44

0

You can use the disabled attribute on form controls like so

<select disabled>

For text, follow this link: How to disable text selection highlighting?

answered Jun 01 '18 at 08:44

Avin Kavish

8,317
1
21
36

score -1 · Answer 5 · answered Apr 29 '22 at 18:44

-1

A very cheap way to "disable" a table row (or anything else ):

.disabled {
    opacity: 0.3;
}

<tr class="disabled">
  ...
</tr>

answered Apr 29 '22 at 18:44

James Bond

2,229
1
15
26

This is just reducing the opacity of the items. It's not preventing users from interacting with the items. – pasevin Sep 14 '22 at 09:29

Avoid user interaction on "disabled" table row

5 Answers5