为什么我的 table header 没有留在原地

Question

我正在尝试修复 table 以便它在搜索栏之后填充 main 的剩余部分。我希望 header 和搜索栏保持固定，只有行移动。我在谷歌上搜索了一下，共识似乎是 postion: sticky top: 0 但这没有用。

但是，我发现如果我将包装器上的 CSS 移动到主要 CSS，它确实会滚动，但搜索和按钮移动以及 header。我需要在我的 CSS 中更改什么才能使所有内容保持原样并且只有记录滚动？

* {
  margin: 0;
  padding: 0
}

:root {
  --color-1: rgba(211, 211, 211, .25);
  --color-2: rgba(70, 130, 180, .75);
}

body {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(10rem, auto) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "s h" "s m";
  user-select: none;
  overflow: hidden;
}

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

header {
  padding: 1rem 1rem 1rem 1rem;
  border-bottom: 1px solid var(--color-1);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

main {
  padding: 1rem;
  position: relative;
  overflow-y: auto;
}

#omnibar {
  padding-bottom: 1rem;
}

#wrapper {
  position: relative;
  overflow-y: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}

th {
  background-color: var(--color-1);
  padding: .75rem;
  position: sticky;
  top: 0;
}

td {
  padding: .5rem;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav>
  <ul>
    <li class="sidebar-item">Dashboard</li>
    <li class="sidebar-item">Invoices</li>
    <li class="sidebar-item">Vendors</li>
    <li class="sidebar-item">Departments</li>
    <li class="sidebar-item">Accounts</li>
  </ul>
</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="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>

Answer 1

你可能需要位置：粘在 div 你想留下，分开 div 你想粘在别人身上祝你好运我希望我有帮助

Answer 2

我认为你的问题是使用 overflow-y: auto; 尝试删除它，透明的 header 让它看起来很奇怪，但你可以解决这个问题

#wrapper {
  position: relative;
}

这是一个工作演示 https://codepen.io/nicolasa47/pen/YzEzezx

Answer 3

您可以将搜索放入一个容器中并设置其样式，使其具有粘性，与布局的其余部分一样具有白色背景，并使用 z-index 使其悬停在数据字段上你滚动。您可以使用填充来填充 space 足以覆盖搜索字段和发票之间的差异 header。

编辑，我刚刚想到您指的是 table header 而不是“发票”页面 header。我的错。我更新了代码，让搜索和 table header 使用一些定位保持粘性。您还为颜色使用了透明度，如果您不是绝对需要，那么您可以只使用实际的灰色阴影而不是 alpha 通道来完成这项工作。

* {
  margin: 0;
  padding: 0
}

:root {
  --color-1: rgba(244, 244, 244, 100);
  --color-2: rgba(70, 130, 180, .75);
}

body {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(10rem, auto) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "s h"
    "s m";
  user-select: none;
  overflow: hidden;
}

nav {
  grid-area: s;
  background-color: var(--color-1);
  padding-top: 3.5rem;
}

header {
  grid-area: h;
  padding: 1rem 1rem 1rem 1rem;
  border-bottom: 1px solid var(--color-1);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

main {
  grid-area: m;
  position: relative;
  overflow-y: auto;
}


.sidebar-item {
  padding: .5rem 1rem .5rem 1rem;
}

.sidebar-item:hover {
  background-color: var(--color-2);
}

.container {
  display: block;
  padding: 1rem;
  background-color: white;
  position: sticky;
  top: 0;
  width: 100%;
  margin: 0 auto;
  z-index: 4;
}


table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}

th {
  background-color: var(--color-1);
  padding: 0.75rem;
  position: sticky;
  top: 3.2rem;
}


td {
  padding: .5rem;
}

<!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>
      <ul>
        <li class="sidebar-item">Dashboard</li>
        <li class="sidebar-item">Invoices</li>
        <li class="sidebar-item">Vendors</li>
        <li class="sidebar-item">Departments</li>
        <li class="sidebar-item">Accounts</li>
      </ul>
    </nav>
    <header>
      <div class="material-icons">menu</div>
      <div>Invoices</div>
    </header>
    <main>

      <div id="wrapper">
        <table>
          <div class="container">
            <input id="omnibar" type="search" placeholder="Search ...">
            <button>New Invoice</button>
            <thead>
              <tr>
                <th>Invoice#</th>
                <th>Vendor</th>
                <th>Date</th>
                <th>PO#</th>
                <th>Amount</th>
              </tr>
            </thead>
          </div>
          <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>

为什么我的 table header 没有留在原地

Why is my table header not staying in place

html

css

html-table