[HTML CSS JS] Запретить пользователю изменять значения, используя элемент before

Question

Я хочу заблокировать три таблицы с использованием входов перед селектором.С помощью jquery я добавляю класс disabled-element в каждую таблицу:

$("table").toggleClass("disabled-element");

Вот мой отключенный элемент в css:

.disabled-element::before {
  background-color: #4e555b;
  opacity: 0.5;
  z-index: 10;
  position: absolute;
  height: 100%;
  width: 100%;
  content: ""; 
}

структуры таблицы:

<table class="table table-stripped">
<thead>
  <th scope="col">Rotor Number</th>
  <th scope="col">Current values</th>
</thead>
</table>
<tbody>
<tr>
  <td></td><td></td>
</tr>
</tbody>

но похоже, что класс добавляется только в селектор:

Answer 1

Я пропустил position: relative оператор для родительского элемента