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 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>