Проблемы с перекрытием прозрачной таблицы ⇐ CSS

[Anonymous]

Как показано выше, при прокрутке нижняя часть таблицы видна под заголовком благодаря прозрачному фону. В идеале я хотел бы сохранить эту прозрачность. Как я могу скрыть часть тела таблицы под заголовком?
Фон будет каким-то образом анимирован, а таблица будет иметь фон. -filter для создания эффекта матового стекла.
Я пробовал использовать свойство clip-path в CSS, но безуспешно, а также помещал таблицу тело в div, но это нарушает фиксированный интервал между столбцами таблиц.

Код: Выделить всё

const data = [
{ name: "Player 1", playFabPlayerID: "12345" },
{ name: "Player 2", playFabPlayerID: "67890" },
{ name: "Player 3", playFabPlayerID: "54321" },
{ name: "Player 4", playFabPlayerID: "09876" },
{ name: "Player 5", playFabPlayerID: "11223" },
{ name: "Player 6", playFabPlayerID: "44556" },
];

const tb = document.getElementById("pt-body");

data.map((item, index) => {
const tr = document.createElement("tr");
tr.key = index;
tr.innerHTML = `



${item.name}
${item.playFabPlayerID}

B
K

`;

tb.appendChild(tr);
});

Код: Выделить всё

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

* {
font-family: "Inter", sans-serif;
}

*::-webkit-scrollbar {
display: none;
}

body {
background-color: #121212;
overflow: hidden;
}

.pseudo-table-container {
width: 100%;
max-height: 200px;
overflow-y: auto;
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

.pseudo-table {
width: 100%;
border-collapse: collapse;
border-radius: 8px;
}

.pseudo-table thead {
background-color: none;
border-radius: 8px;
color: white;
position: sticky;
top: 0;
}

.pseudo-table th,
.pseudo-table td {
text-align: left;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.pseudo-table th {
font-weight: 450;
}

.pseudo-table td {
color: white;
border-radius: 8px;
}

.pseudo-table .actions-header {
text-align: right;
padding-right: 8px;
}

.pseudo-table .actions {
text-align: right;
border-radius: 8px;
padding-right: 8px;
}

.pseudo-table .actions button {
margin-left: 5px;
border-radius: 8px;
}

#header-search {
width: 128px;
margin-left: 16px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.25);
background-color: rgba(0, 0, 0, 0.5);
padding: 4px;
color: white;
}

.pt-checkbox {
padding-left: 16px;
padding-top: 8px;
}

.pt-checkbox input {
appearance: none;
width: 20px;
height: 20px;
border: #4a72ff 2px solid;
border-radius: 4px;
}

.pt-checkbox input:checked {
background-color: #4a72ff;
}

Код: Выделить всё

Name


PlayFabPlayerID
Actions

Подробнее здесь: https://stackoverflow.com/questions/786 ... rent-table