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!

Answer 1

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!

Answer 2

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;
}

Answer 3

<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

Answer 4

You can use the disabled attribute on form controls like so

<select disabled>

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

Answer 5

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

.disabled {
    opacity: 0.3;
}

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