為什么我的表頭沒有留在原位-有解無憂

我正在嘗試修復表格，以便它在搜索欄之后填充 main 的其余部分。我希望標題和搜索欄保持固定，只有行移動。我用谷歌搜索了這個，似乎達成了共識，postion: sticky top: 0但這沒有用。

但是，我發現如果我將包裝器上的 CSS 移動到主 CSS，它確實會滾動，但搜索和按鈕以及標題都會移動。我需要在我的 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>

uj5u.com熱心網友回復：

您可以將搜索放入容器并設定樣式，使其具有粘性，與布局的其余部分一樣具有白色背景，并使用 z-index 允許它在滾動時懸停在資料欄位上。您可以使用填充來填充足夠的空間以覆寫搜索欄位和發票標題之間的差異。

編輯，我突然想到您指的是表格標題而不是“發票”頁面標題。我的錯。我更新了代碼，使搜索和表頭都使用一些定位保持粘性。您還使用了顏??色的透明度，如果您不是絕對需要，那么您可以使用實際的灰色陰影而不是 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>

uj5u.com熱心網友回復：

您可能需要位置：粘在您想要留下的 div 上，將您想要與其他人粘貼的 div 分開祝您好運，希望我對您有所幫助

uj5u.com熱心網友回復：

我認為您的問題是使用overflow-y: auto; 嘗試洗掉它，透明標題使它看起來很奇怪，但你可以修復它

#wrapper {
  position: relative;
}

這是一個作業演示https://codepen.io/nicolasa47/pen/YzEzezx

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459631.html

標籤：html css html表

上一篇：動態改變彈性容器子元素的順序

下一篇：如何讓孩子在flex中填充父母的所有可用高度