如何在固定 header css table 滚动过去 header 时隐藏行

Question

我得到了一个有效的答案，但我不想只是复制和粘贴，我想弄清楚发生了什么并将其应用到我的代码中。所以我对我的代码做了一些调整，我得到了很多它的工作就像 table header 现在是静态的，但是我无法让行不显示在 header 上。我也不确定上面提到的答案中的哪个代码解决了这个问题。所以问题是我如何在当前代码中隐藏行，因为它们滚动经过 header？我尝试在 1 的行上使用 z-index 和 4 的 header 这不起作用。

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 class="sidebar-item">Dashboard</div>
                <div class="sidebar-item">Invoices</div>
                <div class="sidebar-item">Vendors</div>
                <div class="sidebar-item">Departments</div>
                <div class="sidebar-item">Dashboard</div>

            </div>
        </nav>
        <header>
            <div class="material-icons">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);
}

Answer 1

如果只是改变背景颜色的不透明度，从 background-color: var(--color-1) 到例如 thead th{} 中的 background-color: rgb(173 209 77) 会怎么样。

    * {
      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 class="sidebar-item">Dashboard</div>
        <div class="sidebar-item">Invoices</div>
        <div class="sidebar-item">Vendors</div>
        <div class="sidebar-item">Departments</div>
        <div class="sidebar-item">Dashboard</div>
      </div>
    </nav>
    <header>
      <div class="material-icons">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>

如何在固定 header css table 滚动过去 header 时隐藏行

How to hide rows as they scroll past header on fixed header css table

html

css

html-table