I pretty much just want to set a max-height on a tbody and change the overflow-y to auto so I have a static header and scrollable body.
Like this maybe:
table {
display: block;
width: 100%;
text-align: left;
border-collapse: collapse;
}
tbody {
max-height: 300px;
overflow-y: auto;
}
I've tried everything. Parent has 100% width. The only thing I could get working was to put a wrapper around the whole table, and make the wrapper overflow-y: auto; max-height: #px; but that's not really what I'm after (no static header). I guess tomorrow after some sleep I could try a sticky header but I was hoping one of you gurus could enlighten me.
I take that back, I did manage to dig up a solution here on SO but I had to either use table-layout: fixed or go with broken cell alignment. No bueno.
... and no matter what the darn scrollbar won't scroll (without clicking and holding)!
I'll include the whole thing below. I'm guessing it has something to do with flexbox but I might be horribly wrong. There might be some artifacts from me screwing with it as well.
<body>
<aside>
<!-- logo -->
<img src="./svg/heartbeat.svg" class="logo" height="55" width="55" alt="made with love">
<!-- nav -->
<nav>
<span class="bundle">
<img src="./svg/home.svg" height="25" width="25" alt="home">
<span class="caption">home</span>
</span>
<span class="bundle">
<img src="./svg/account.svg" height="25" width="25" alt="account">
<span class="caption">account</span>
</span>
<span class="bundle">
<img src="./svg/stats.svg" height="25" width="25" alt="stats">
<span class="caption">statistics</span>
</span>
<span class="bundle">
<img src="./svg/settings.svg" height="25" width="25" alt="settings">
<span class="caption">settings</span>
</span>
</nav>
<!-- footer -->
<footer>
<span class="bundle">
<img src="./svg/discord.svg" height="25" width="25" alt="chat">
<span class="caption">Discord</span>
</span>
</footer>
</aside>
<main>
<!-- top -->
<div class="row">
<section>
<span class="caption pad-top">Today</span>
<h3>$139.23</h3>
</section>
<section>
<span class="caption pad-top">This Month</span>
<h3>$1,439.01</h3>
</section>
<section>
<span class="caption pad-top">YTD</span>
<h3>$22,048.79</h3>
</section>
</div>
<!-- bottom -->
<div class="row">
<section>
<span class="caption pad-top">Open Positions</span>
<h3>$24.45 / $50,001.04</h3>
<hr class="colored" width="100%">
<span class="pad-bottom"></span>
<!-- start table wrapper --><div class="table-wrapper">
<table class="body-font-styling-2">
<colgroup>
<col style="width: 2%">
<col style="width: 5%">
</colgroup>
<thead>
<tr>
<th class="optbl-number">#</th>
<th class="optbl-currency">Currency</th>
<th class="optbl-amount border-left">Amount</th>
<th class="optbl-price">Price</th>
<th class="optbl-cost">Cost</th>
<th class="optbl-result">Result</th>
<th class="optbl-age">Age</th>
<th class="optbl-action">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="optbl-number">1</td>
<td class="optbl-currency">ADA</td>
<td class="optbl-amount border-left">49.70178926</td>
<td class="optbl-price">0.0000000024</td>
<td class="optbl-cost">0.000099801</td>
<td class="optbl-result"><span class="even">0.00%</span></td>
<td class="optbl-age">1 hour</td>
<td class="optbl-action"><span class="action-wrapper"><span class="tooltip" data-text="sell"><img src="./svg/sell.svg" class="action" height="25" width="25" alt="sell"></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" height="25" width="25" alt="hold"></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" height="25" width="25" alt="chat"></span></span></td>
</tr>
<tr>
<td class="optbl-number">2</td>
<td class="optbl-currency">ADA</td>
<td class="optbl-amount border-left">49.70178926</td>
<td class="optbl-price">0.0000000024</td>
<td class="optbl-cost">0.000099801</td>
<td class="optbl-result"><span class="negative">1.69%</span></td>
<td class="optbl-age">1 hour</td>
<td class="optbl-action"><span class="action-wrapper"><span class="tooltip" data-text="sell"><img src="./svg/sell.svg" class="action" height="25" width="25" alt="sell"></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" height="25" width="25" alt="hold"></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" height="25" width="25" alt="chat"></span></span></td>
</tr>
<tr>
<td class="optbl-number">3</td>
<td class="optbl-currency">ADA</td>
<td class="optbl-amount border-left">49.70178926</td>
<td class="optbl-price">0.0000000024</td>
<td class="optbl-cost">0.000099801</td>
<td class="optbl-result"><span class="negative">1.69%</span></td>
<td class="optbl-age">1 hour</td>
<td class="optbl-action"><span class="action-wrapper"><span class="tooltip" data-text="sell"><img src="./svg/sell.svg" class="action" height="25" width="25" alt="sell"></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" height="25" width="25" alt="hold"></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" height="25" width="25" alt="chat"></span></span></td>
</tr>
<tr>
<td class="optbl-number">4</td>
<td class="optbl-currency">ADA</td>
<td class="optbl-amount border-left">49.70178926</td>
<td class="optbl-price">0.0000000024</td>
<td class="optbl-cost">0.000099801</td>
<td class="optbl-result"><span class="positive">1.69%</span></td>
<td class="optbl-age">1 hour</td>
<td class="optbl-action"><span class="action-wrapper"><span class="tooltip" data-text="sell"><img src="./svg/sell.svg" class="action" height="25" width="25" alt="sell"></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" height="25" width="25" alt="hold"></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" height="25" width="25" alt="chat"></span></span></td>
</tr>
<tr>
<td class="optbl-number">5</td>
<td class="optbl-currency">ADA</td>
<td class="optbl-amount border-left">49.70178926</td>
<td class="optbl-price">0.0000000024</td>
<td class="optbl-cost">0.000099801</td>
<td class="optbl-result"><span class="negative">1.69%</span></td>
<td class="optbl-age">1 hour</td>
<td class="optbl-action"><span class="action-wrapper"><span class="tooltip" data-text="sell"><img src="./svg/sell.svg" class="action" height="25" width="25" alt="sell"></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" height="25" width="25" alt="hold"></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" height="25" width="25" alt="chat"></span></span></td>
</tr>
<tr>
<td class="optbl-number">6</td>
<td class="optbl-currency">ADA</td>
<td class="optbl-amount border-left">49.70178926</td>
<td class="optbl-price">0.0000000024</td>
<td class="optbl-cost">0.000099801</td>
<td class="optbl-result"><span class="negative">1.69%</span></td>
<td class="optbl-age">1 hour</td>
<td class="optbl-action"><span class="action-wrapper"><span class="tooltip" data-text="sell"><img src="./svg/sell.svg" class="action" height="25" width="25" alt="sell"></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" height="25" width="25" alt="hold"></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" height="25" width="25" alt="chat"></span></span></td>
</tr>
<tr>
<td class="optbl-number">7</td>
<td class="optbl-currency">ADA</td>
<td class="optbl-amount border-left">49.70178926</td>
<td class="optbl-price">0.0000000024</td>
<td class="optbl-cost">0.000099801</td>
<td class="optbl-result"><span class="negative">1.69%</span></td>
<td class="optbl-age">1 hour</td>
<td class="optbl-action"><span class="action-wrapper"><span class="tooltip" data-text="sell"><img src="./svg/sell.svg" class="action" height="25" width="25" alt="sell"></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" height="25" width="25" alt="hold"></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" height="25" width="25" alt="chat"></span></span></td>
</tr>
<tr>
<td class="optbl-number">8</td>
<td class="optbl-currency">ADA</td>
<td class="optbl-amount border-left">49.70178926</td>
<td class="optbl-price">0.0000000024</td>
<td class="optbl-cost">0.000099801</td>
<td class="optbl-result"><span class="negative">1.69%</span></td>
<td class="optbl-age">1 hour</td>
<td class="optbl-action"><span class="action-wrapper"><span class="tooltip" data-text="sell"><img src="./svg/sell.svg" class="action" height="25" width="25" alt="sell"></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" height="25" width="25" alt="hold"></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" height="25" width="25" alt="chat"></span></span></td>
</tr>
<tr>
<td class="optbl-number">9</td>
<td class="optbl-currency">ADA</td>
<td class="optbl-amount border-left">49.70178926</td>
<td class="optbl-price">0.0000000024</td>
<td class="optbl-cost">0.000099801</td>
<td class="optbl-result"><span class="negative">1.69%</span></td>
<td class="optbl-age">1 hour</td>
<td class="optbl-action"><span class="action-wrapper"><span class="tooltip" data-text="sell"><img src="./svg/sell.svg" class="action" height="25" width="25" alt="sell"></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" height="25" width="25" alt="hold"></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" height="25" width="25" alt="chat"></span></span></td>
</tr>
<tr>
<td class="optbl-number">10</td>
<td class="optbl-currency">ADA</td>
<td class="optbl-amount border-left">49.70178926</td>
<td class="optbl-price">0.0000000024</td>
<td class="optbl-cost">0.000099801</td>
<td class="optbl-result"><span class="negative">1.69%</span></td>
<td class="optbl-age">1 hour</td>
<td class="optbl-action"><span class="action-wrapper"><span class="tooltip" data-text="sell"><img src="./svg/sell.svg" class="action" height="25" width="25" alt="sell"></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" height="25" width="25" alt="hold"></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" height="25" width="25" alt="chat"></span></span></td>
</tr>
<tr>
<td class="optbl-number">11</td>
<td class="optbl-currency">ADA</td>
<td class="optbl-amount border-left">49.70178926</td>
<td class="optbl-price">0.0000000024</td>
<td class="optbl-cost">0.000099801</td>
<td class="optbl-result"><span class="positive">1.69%</span></td>
<td class="optbl-age">1 hour</td>
<td class="optbl-action"><span class="action-wrapper"><span class="tooltip" data-text="sell"><img src="./svg/sell.svg" class="action" height="25" width="25" alt="sell"></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" height="25" width="25" alt="hold"></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" height="25" width="25" alt="chat"></span></span></td>
</tr>
<tr>
<td class="optbl-number">12</td>
<td class="optbl-currency">ADA</td>
<td class="optbl-amount border-left">49.70178926</td>
<td class="optbl-price">0.0000000024</td>
<td class="optbl-cost">0.000099801</td>
<td class="optbl-result"><span class="negative">1.69%</span></td>
<td class="optbl-age">1 hour</td>
<td class="optbl-action"><span class="action-wrapper"><span class="tooltip" data-text="sell"><img src="./svg/sell.svg" class="action" height="25" width="25" alt="sell"></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" height="25" width="25" alt="hold"></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" height="25" width="25" alt="chat"></span></span></td>
</tr>
</tbody>
</table>
<!-- end table wrapper --></div>
<span class="pad-top"></span>
</section>
</div>
<div class="row">
<section>
<span class="caption pad-top">Ledger</span>
<h3>$24.45</h3>
<hr class="colored" width="100%">
<p>Kraken</p>
</section>
</div>
<div class="row">
<section>
<span class="caption pad-top">Log</span>
<h3>$24.45</h3>
<hr class="colored" width="100%">
<p>Kraken</p>
</section>
</div>
</main>
</body>
I managed to get something like what you're looking for using position:sticky on the th elements.
It explains that you actually cannot use position: sticky on thead or tr elements which might be what you would initially attempt to do when using sticky.
.table-wrapper {
height: 300px;
overflow-y: auto;
}
thead > tr > th {
position: sticky;
top: 0;
background-color: black; //for clarity
}