Избегайте взаимодействия пользователя с «отключенной» строкой таблицы

У меня есть таблица HTML, в которой некоторые строки отключены. Я хотел бы четко показать это пользователю, поэтому я применяю фильтр размытия к tr, имея такую ​​таблицу:

ПРИМЕЧАНИЕ. На https://stackblitz.com/edit/angular-cdypks есть живой пример.

Проблема в том, что, хотя он выглядит отключенным, пользователь все еще может взаимодействовать с ним, выбирая текст и нажимая на поле выбора. Кроме того, некоторые ячейки являются областями сбрасывания, куда я могу сбрасывать объекты, поэтому я бы хотел этого избежать.

Я не хотел бы использовать Javascript, поэтому мне интересно, есть ли способ разместить прозрачный DIV перед отключенным trили что-то подобное...

Спасибо!

Решение проблемы

Если вы хотите отключить какую-то строку, вы можете использовать pointer-events: noneдля этой строки. Это предотвратит любые события мыши в вашем ряду.

tr.disabled{
 pointer-events: none;
}