Html - Overlap issues with a transparent table

Smiggster
June 23, 2024
116 views
0 votes
2 Answers

As shown above, when I scroll down the body of the table is visible under the header due to the transparent background. Ideally, I would like to keep this transparency, how could I hide the section of the table body underneath the header?

The background is going to animated in some way with the table having a backdrop-filter to create a frosted glass effect.

I have tried using the clip-path property in CSS with no success there, as well as putting the table body in a div but that messes up the fixed spacing of the tables columns.

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 = `
    <td class="pt-checkbox">
      <input type="checkbox" />
    </td>
    <td>${item.name}</td>
    <td class="playfab">${item.playFabPlayerID}</td>
    <td class="actions">
      <button type="button">B</button>
      <button type="button">K</button>
    </td>
  `;

  tb.appendChild(tr);
});

@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&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;
}

<div class="pseudo-table-container">
  <table class="pseudo-table">
    <thead>
      <tr>
        <th class="pt-checkbox">
          <input type="checkbox" />
        </th>
        <th>
          Name
          <input id="header-search" type="text" placeholder="Search" />
        </th>
        <th>PlayFabPlayerID</th>
        <th class="actions-header">Actions</th>
      </tr>
    </thead>
    <tbody id="pt-body"></tbody>
  </table>
</div>

Answers

you can use position sticky for the header
chnage the bg of the header with the z-index the header will be above the table

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 = `
    <td class="pt-checkbox">
      <input type="checkbox" />
    </td>
    <td>${item.name}</td>
    <td class="playfab">${item.playFabPlayerID}</td>
    <td class="actions">
      <button type="button">B</button>
      <button type="button">K</button>
    </td>
  `;

  tb.appendChild(tr);
});

@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&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);
  position: relative;
}

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

.pseudo-table thead {
  background-color: rgba(0, 0, 0, 0.75); 
  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;
}

<div class="pseudo-table-container">
  <table class="pseudo-table">
    <thead>
      <tr>
        <th class="pt-checkbox">
          <input type="checkbox" />
        </th>
        <th>
          Name
          <input id="header-search" type="text" placeholder="Search" />
        </th>
        <th>PlayFabPlayerID</th>
        <th class="actions-header">Actions</th>
      </tr>
    </thead>
    <tbody id="pt-body"></tbody>
  </table>
</div>

I don’t quite understand what you want. But you can use text-shadow:

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 = `
    <td class="pt-checkbox">
      <input type="checkbox" />
    </td>
    <td>${item.name}</td>
    <td class="playfab">${item.playFabPlayerID}</td>
    <td class="actions">
      <button type="button">B</button>
      <button type="button">K</button>
    </td>
  `;

  tb.appendChild(tr);
});

@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&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;
  text-shadow: 0 1px 20px #000, 1px 1px 20px #000, 0 -1px 20px #000, -1px -1px 20px #000, 0 1px 20px #000, 1px 1px 20px #000, 0 -1px 20px #000, -1px -1px 20px #000;
}

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

th.pt-checkbox input{
  background-color: #121212;
}

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

<div class="pseudo-table-container">
  <table class="pseudo-table">
    <thead>
      <tr>
        <th class="pt-checkbox">
          <input type="checkbox" />
        </th>
        <th>
          Name
          <input id="header-search" type="text" placeholder="Search" />
        </th>
        <th>PlayFabPlayerID</th>
        <th class="actions-header">Actions</th>
      </tr>
    </thead>
    <tbody id="pt-body"></tbody>
  </table>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Overlap issues with a transparent table

Answers