Why is my table header not staying in place-CodePudding

I am trying to make table fixed so that it fills the remainder of main after the search bar. I want the header and the search bar to stay fixed and only the rows move. I googled this and the consensus seemed to be postion: sticky top: 0 but this did not work.

However, I found if I moved the CSS on the wrapper to the main CSS it did scroll but the search and button moved as well as the header. What do I need to change in my CSS to keep everything in place and only the records scroll?

* {
  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 >Dashboard</li>
    <li >Invoices</li>
    <li >Vendors</li>
    <li >Departments</li>
    <li >Accounts</li>
  </ul>
</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="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>

CodePudding user response：

You could put the search into a container and style it so that it's sticky, has a white background like the rest of your layout, and use the z-index to allow it to hover over the data fields as you scroll. You can use padding to fill the space enough to cover the difference between the search field and the invoice header.

Edit, it just occurred to me that you were referring to the table header and not the "invoices" page header. My fault. I updated the code to have both the search and the table header be sticky using some positioning. You're also using transparency for the color which if you don't absolutely need then you can just use that actual shade of gray instead of the alpha channel to make this work.

* {
  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 >Dashboard</li>
        <li >Invoices</li>
        <li >Vendors</li>
        <li >Departments</li>
        <li >Accounts</li>
      </ul>
    </nav>
    <header>
      <div >menu</div>
      <div>Invoices</div>
    </header>
    <main>

      <div id="wrapper">
        <table>
          <div >
            <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>

CodePudding user response：

You probably need position: sticky on div you want to stay, separate div you want to stick from others Good luck I hope I was helpful

CodePudding user response：

I think your issues is using overflow-y: auto; try removing this, the transparent header makes it look weird but you can fix that

#wrapper {
  position: relative;
}

Here is a working demo https://codepen.io/nicolasa47/pen/YzEzezx