透明表格滚动时表头与表体重叠问题的解决方案咨询

要解决滚动时表格主体透过透明表头显示的问题，无需改动HTML结构或破坏列布局，只需要给表头（thead）添加与容器一致的毛玻璃背景属性即可：

修改后的CSS关键代码 #

.pseudo-table thead {
  /* 替换原有的background-color: none; */
  background-color: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  color: white;
  position: sticky;
  top: 0;
  /* 确保表头层级高于表体，避免被覆盖 */
  z-index: 1;
}

原理说明 #

• 原代码中仅容器（.pseudo-table-container）添加了毛玻璃效果，表头本身完全透明，导致滚动时表体内容透过表头显示。
• 给thead添加与容器一致的background-color和backdrop-filter属性后，表头区域会形成独立的毛玻璃遮罩，既保留透明模糊效果，又能遮挡下方的表体内容。
• 添加z-index: 1确保表头始终在表体上方，避免滚动时被表体内容覆盖。

完整修改后的CSS代码 #

@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: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  color: white;
  position: sticky;
  top: 0;
  z-index: 1;
}

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

内容的提问来源于stack exchange，提问作者Smiggster