I recently asked this question? I got an answer that did work but I did not want to just copy and paste, I wanted to figure out what was going on and apply it to my code. So I made some tweaks to my code and I got a lot of it working like the table header is now static, however I could not get the rows to not display over the header. I also I was not sure which of the code in the answer mentioned above solved this. So the question is how do i in this current code hide the rows as they scroll past the header? I tried using z-index on the rows of 1 and the header of 4 this did not work.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
<title>AP Log 3.0</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav>
<div>
<div >Dashboard</div>
<div >Invoices</div>
<div >Vendors</div>
<div >Departments</div>
<div >Dashboard</div>
</div>
</nav>
<header>
<div >menu</div>
<div>Invoices</div>
</header>
<main>
<div id="omnibar">
<input type="search" placeholder="Search ...">
<button>New Invoice</button>
</div>
<div id="table-wrapper">
<table>
<thead>
<tr>
<th>Invoice#</th>
<th>Vendor</th>
<th>Date</th>
<th>PO#</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>2207419457</td>
<td>Medline Industries Inc</td>
<td>04/18/2022</td>
<td>305453</td>
<td>365.04</td>
</tr>
<tr>
<td>2207419461</td>
<td>Medline Industries Inc</td>
<td>04/18/2022</td>
<td>306115</td>
<td>547.55</td>
</tr>
<tr>
<td>2207419462</td>
<td>Medline Industries Inc</td>
<td>04/18/2022</td>
<td>306645</td>
<td>730.07</td>
</tr>
<tr>
<td>2207419463</td>
<td>Medline Industries Inc</td>
<td>04/18/2022</td>
<td>306743</td>
<td>182.52</td>
</tr>
<tr>
<td>2207419464</td>
<td>Medline Industries Inc</td>
<td>04/18/2022</td>
<td>306573</td>
<td>419.85</td>
</tr>
<tr>
<td>INV22-18109</td>
<td>ISO-Med, Inc.</td>
<td>04/14/2022</td>
<td>306691</td>
<td>2036.12</td>
</tr>
<tr>
<td>IN95052292</td>
<td>Performance Health Supply</td>
<td>04/18/2022</td>
<td>307156</td>
<td>1569.62</td>
</tr>
<tr>
<td>80465167</td>
<td>Verathon</td>
<td>04/12/2022</td>
<td>306837</td>
<td>2609.27</td>
</tr>
<tr>
<td>8808144278</td>
<td>VWR International, LLC</td>
<td>04/08/2022</td>
<td>306872</td>
<td>5405.82</td>
</tr>
<tr>
<td>8808150081</td>
<td>VWR International, LLC</td>
<td>04/11/2022</td>
<td>306877</td>
<td>5405.82</td>
</tr>
<tr>
<td>8808150082</td>
<td>VWR International, LLC</td>
<td>04/11/2022</td>
<td>306875</td>
<td>369.85</td>
</tr>
<tr>
<td>8808157812</td>
<td>VWR International, LLC</td>
<td>04/11/2022</td>
<td>306875</td>
<td>721.49</td>
</tr>
<tr>
<td>74616105</td>
<td>Baxter Healthcare Corporation</td>
<td>04/05/2022</td>
<td>305951</td>
<td>1042.82</td>
</tr>
<tr>
<td>74651499</td>
<td>Baxter Healthcare Corporation</td>
<td>04/07/2022</td>
<td>306768</td>
<td>9759.18</td>
</tr>
<tr>
<td>508770</td>
<td>MethaPharm, Inc</td>
<td>04/14/2022</td>
<td>306995</td>
<td>1356</td>
</tr>
<tr>
<td>5865861759</td>
<td>Covidien</td>
<td>04/18/2022</td>
<td>307122</td>
<td>1797.92</td>
</tr>
<tr>
<td>74664938</td>
<td>Baxter Healthcare Corporation</td>
<td>04/08/2022</td>
<td>306768</td>
<td>2053.24</td>
</tr>
<tr>
<td>5865862566</td>
<td>Covidien</td>
<td>04/18/2022</td>
<td>307122</td>
<td>599.31</td>
</tr>
<tr>
<td>74688808</td>
<td>Baxter Healthcare Corporation</td>
<td>04/11/2022</td>
<td>306768</td>
<td>1419.42</td>
</tr>
<tr>
<td>INV000294956</td>
<td>Katena Products, Inc</td>
<td>04/18/2022</td>
<td>307158</td>
<td>603.4</td>
</tr>
<tr>
<td>1783744</td>
<td>Key Surgical Inc</td>
<td>04/13/2022</td>
<td>306016</td>
<td>1739.09</td>
</tr>
<tr>
<td>2893201</td>
<td>Masimo</td>
<td>04/08/2022</td>
<td>306537</td>
<td>3232.5</td>
</tr>
<tr>
<td>993388426</td>
<td>Mead Johnson Nutritional</td>
<td>04/11/2022</td>
<td>306803</td>
<td>48</td>
</tr>
<tr>
<td>943431369</td>
<td>Smith & Nephew Inc</td>
<td>04/13/2022</td>
<td>306992</td>
<td>3203.97</td>
</tr>
<tr>
<td>943432255</td>
<td>Smith & Nephew Inc</td>
<td>04/13/2022</td>
<td>306993</td>
<td>3560</td>
</tr>
<tr>
<td>2207505681</td>
<td>Medline Industries Inc</td>
<td>04/18/2022</td>
<td>306691</td>
<td>2401.1</td>
</tr>
<tr>
<td>943433401</td>
<td>Smith & Nephew Inc</td>
<td>04/13/2022</td>
<td>306992</td>
<td>4405.12</td>
</tr>
<tr>
<td>3505619723</td>
<td>Staples Advantage</td>
<td>04/19/2022</td>
<td>307168</td>
<td>3.2</td>
</tr>
<tr>
<td>3505619724</td>
<td>Staples Advantage</td>
<td>04/19/2022</td>
<td>307161</td>
<td>184.78</td>
</tr>
<tr>
<td>9201075353</td>
<td>Stryker Sales Corporation (Endoscopy)</td>
<td>03/05/2022</td>
<td>292171</td>
<td>1309.27</td>
</tr>
<tr>
<td>2207604620</td>
<td>Medline Industries Inc</td>
<td>04/19/2022</td>
<td>306588</td>
<td>1274.59</td>
</tr>
<tr>
<td>2207604621</td>
<td>Medline Industries Inc</td>
<td>04/19/2022</td>
<td>306949</td>
<td>190.97</td>
</tr>
<tr>
<td>2207604622</td>
<td>Medline Industries Inc</td>
<td>04/19/2022</td>
<td>306949</td>
<td>23.42</td>
</tr>
<tr>
<td>2207604623</td>
<td>Medline Industries Inc</td>
<td>04/19/2022</td>
<td>307044</td>
<td>1834.61</td>
</tr>
<tr>
<td>2207604624</td>
<td>Medline Industries Inc</td>
<td>04/19/2022</td>
<td>307120</td>
<td>4166.3</td>
</tr>
<tr>
<td>2207604625</td>
<td>Medline Industries Inc</td>
<td>04/19/2022</td>
<td>307120</td>
<td>1175.66</td>
</tr>
</tbody>
</table>
</div>
</main>
</body>
</html>
CSS
* {
margin: 0;
}
:root {
--font-1: rgba(0, 0, 0, .75);
--font-2: rgba(0, 0, 0, 1);
--color-1: rgba(211, 211, 211, .25);
--color-2: rgba(70, 130, 180, .25);
}
body {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: minmax(12rem, auto) 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"s h"
"s m";
user-select: none;
color: var(--font-1);
}
nav {grid-area: s;}
header {grid-area: h;}
main {grid-area: m;}
nav {
background-color: var(--color-1);
padding-top: 3.5rem;
}
.sidebar-item {
padding: .5rem 1rem .5rem 1rem;
}
.sidebar-item:hover {
background-color: var(--color-2);
color: var(--font-2);
}
header {
padding: 1rem;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
border-bottom: 1px solid var(--color-1);
}
main {
padding: 1rem;
display: grid;
grid-template-rows: auto 1fr;
grid-row-gap: 1rem;
overflow: hidden;
}
#table-wrapper {
overflow-y: auto;
}
table {
width: 100%;
height: 100%;
border-collapse: collapse;
}
thead th {
position: sticky;
top: 0;
background-color: var(--color-1);
padding: 1rem;
}
td {
padding: .75rem;
}
tbody > tr:hover {
background-color: var(--color-2);
}
#table-wrapper::-webkit-scrollbar {
width: .25rem;
}
#table-wrapper::-webkit-scrollbar-track {
background-color: white;
}
#table-wrapper::-webkit-scrollbar-thumb {
background-color: var(--color-2);
}
CodePudding user response：
What if just changing the opacity in the background color, from background-color: var(--color-1) to for example background-color: rgb(173 209 77) in thead th{}.
* {
margin: 0;
}
:root {
--font-1: rgba(0, 0, 0, 0.75);
--font-2: rgba(0, 0, 0, 1);
--color-1: rgba(211, 211, 211, 0.25);
--color-2: rgba(70, 130, 180, 0.25);
}
body {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: minmax(12rem, auto) 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"s h"
"s m";
user-select: none;
color: var(--font-1);
}
nav {
grid-area: s;
}
header {
grid-area: h;
}
main {
grid-area: m;
}
nav {
background-color: var(--color-1);
padding-top: 3.5rem;
}
.sidebar-item {
padding: 0.5rem 1rem 0.5rem 1rem;
}
.sidebar-item:hover {
background-color: var(--color-2);
color: var(--font-2);
}
header {
padding: 1rem;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
border-bottom: 1px solid var(--color-1);
}
main {
padding: 1rem;
display: grid;
grid-template-rows: auto 1fr;
grid-row-gap: 1rem;
overflow: hidden;
}
#table-wrapper {
overflow-y: auto;
}
table {
width: 100%;
height: 100%;
border-collapse: collapse;
}
thead th {
position: sticky;
top: 0;
background-color: rgb(173 209 77);
padding: 1rem;
}
td {
padding: 0.75rem;
}
tbody > tr:hover {
background-color: var(--color-2);
}
#table-wrapper::-webkit-scrollbar {
width: 0.25rem;
}
#table-wrapper::-webkit-scrollbar-track {
background-color: white;
}
#table-wrapper::-webkit-scrollbar-thumb {
background-color: var(--color-2);
}<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://fonts.googleapis.com/icon?family=Material Icons"
rel="stylesheet"
/>
<title>AP Log 3.0</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<nav>
<div>
<div >Dashboard</div>
<div >Invoices</div>
<div >Vendors</div>
<div >Departments</div>
<div >Dashboard</div>
</div>
</nav>
<header>
<div >menu</div>
<div>Invoices</div>
</header>
<main>
<div id="omnibar">
<input type="search" placeholder="Search ..." />
<button>New Invoice</button>
</div>
<div id="table-wrapper">
<table>
<thead>
<tr>
<th>Invoice#</th>
<th>Vendor</th>
<th>Date</th>
<th>PO#</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>2207419457</td>
<td>Medline Industries Inc</td>
<td>04/18/2022</td>
<td>305453</td>
<td>365.04</td>
</tr>
<tr>
<td>2207419461</td>
<td>Medline Industries Inc</td>
<td>04/18/2022</td>
<td>306115</td>
<td>547.55</td>
</tr>
<tr>
<td>2207419462</td>
<td>Medline Industries Inc</td>
<td>04/18/2022</td>
<td>306645</td>
<td>730.07</td>
</tr>
<tr>
<td>2207419463</td>
<td>Medline Industries Inc</td>
<td>04/18/2022</td>
<td>306743</td>
<td>182.52</td>
</tr>
<tr>
<td>2207419464</td>
<td>Medline Industries Inc</td>
<td>04/18/2022</td>
<td>306573</td>
<td>419.85</td>
</tr>
<tr>
<td>INV22-18109</td>
<td>ISO-Med, Inc.</td>
<td>04/14/2022</td>
<td>306691</td>
<td>2036.12</td>
</tr>
<tr>
<td>IN95052292</td>
<td>Performance Health Supply</td>
<td>04/18/2022</td>
<td>307156</td>
<td>1569.62</td>
</tr>
<tr>
<td>80465167</td>
<td>Verathon</td>
<td>04/12/2022</td>
<td>306837</td>
<td>2609.27</td>
</tr>
<tr>
<td>8808144278</td>
<td>VWR International, LLC</td>
<td>04/08/2022</td>
<td>306872</td>
<td>5405.82</td>
</tr>
<tr>
<td>8808150081</td>
<td>VWR International, LLC</td>
<td>04/11/2022</td>
<td>306877</td>
<td>5405.82</td>
</tr>
<tr>
<td>8808150082</td>
<td>VWR International, LLC</td>
<td>04/11/2022</td>
<td>306875</td>
<td>369.85</td>
</tr>
<tr>
<td>8808157812</td>
<td>VWR International, LLC</td>
<td>04/11/2022</td>
<td>306875</td>
<td>721.49</td>
</tr>
<tr>
<td>74616105</td>
<td>Baxter Healthcare Corporation</td>
<td>04/05/2022</td>
<td>305951</td>
<td>1042.82</td>
</tr>
<tr>
<td>74651499</td>
<td>Baxter Healthcare Corporation</td>
<td>04/07/2022</td>
<td>306768</td>
<td>9759.18</td>
</tr>
<tr>
<td>508770</td>
<td>MethaPharm, Inc</td>
<td>04/14/2022</td>
<td>306995</td>
<td>1356</td>
</tr>
<tr>
<td>5865861759</td>
<td>Covidien</td>
<td>04/18/2022</td>
<td>307122</td>
<td>1797.92</td>
</tr>
<tr>
<td>74664938</td>
<td>Baxter Healthcare Corporation</td>
<td>04/08/2022</td>
<td>306768</td>
<td>2053.24</td>
</tr>
<tr>
<td>5865862566</td>
<td>Covidien</td>
<td>04/18/2022</td>
<td>307122</td>
<td>599.31</td>
</tr>
<tr>
<td>74688808</td>
<td>Baxter Healthcare Corporation</td>
<td>04/11/2022</td>
<td>306768</td>
<td>1419.42</td>
</tr>
<tr>
<td>INV000294956</td>
<td>Katena Products, Inc</td>
<td>04/18/2022</td>
<td>307158</td>
<td>603.4</td>
</tr>
<tr>
<td>1783744</td>
<td>Key Surgical Inc</td>
<td>04/13/2022</td>
<td>306016</td>
<td>1739.09</td>
</tr>
<tr>
<td>2893201</td>
<td>Masimo</td>
<td>04/08/2022</td>
<td>306537</td>
<td>3232.5</td>
</tr>
<tr>
<td>993388426</td>
<td>Mead Johnson Nutritional</td>
<td>04/11/2022</td>
<td>306803</td>
<td>48</td>
</tr>
<tr>
<td>943431369</td>
<td>Smith & Nephew Inc</td>
<td>04/13/2022</td>
<td>306992</td>
<td>3203.97</td>
</tr>
<tr>
<td>943432255</td>
<td>Smith & Nephew Inc</td>
<td>04/13/2022</td>
<td>306993</td>
<td>3560</td>
</tr>
<tr>
<td>2207505681</td>
<td>Medline Industries Inc</td>
<td>04/18/2022</td>
<td>306691</td>
<td>2401.1</td>
</tr>
<tr>
<td>943433401</td>
<td>Smith & Nephew Inc</td>
<td>04/13/2022</td>
<td>306992</td>
<td>4405.12</td>
</tr>
<tr>
<td>3505619723</td>
<td>Staples Advantage</td>
<td>04/19/2022</td>
<td>307168</td>
<td>3.2</td>
</tr>
<tr>
<td>3505619724</td>
<td>Staples Advantage</td>
<td>04/19/2022</td>
<td>307161</td>
<td>184.78</td>
</tr>
<tr>
<td>9201075353</td>
<td>Stryker Sales Corporation (Endoscopy)</td>
<td>03/05/2022</td>
<td>292171</td>
<td>1309.27</td>
</tr>
<tr>
<td>2207604620</td>
<td>Medline Industries Inc</td>
<td>04/19/2022</td>
<td>306588</td>
<td>1274.59</td>
</tr>
<tr>
<td>2207604621</td>
<td>Medline Industries Inc</td>
<td>04/19/2022</td>
<td>306949</td>
<td>190.97</td>
</tr>
<tr>
<td>2207604622</td>
<td>Medline Industries Inc</td>
<td>04/19/2022</td>
<td>306949</td>
<td>23.42</td>
</tr>
<tr>
<td>2207604623</td>
<td>Medline Industries Inc</td>
<td>04/19/2022</td>
<td>307044</td>
<td>1834.61</td>
</tr>
<tr>
<td>2207604624</td>
<td>Medline Industries Inc</td>
<td>04/19/2022</td>
<td>307120</td>
<td>4166.3</td>
</tr>
<tr>
<td>2207604625</td>
<td>Medline Industries Inc</td>
<td>04/19/2022</td>
<td>307120</td>
<td>1175.66</td>
</tr>
</tbody>
</table>
</div>
</main>
</body>
</html>