问题描述
我几乎只想在 tbody 上设置一个 max-height 并将 overflow-y 更改为 auto，这样我就有了一个静态标题和可滚动正文。
可能是这样：
table {
display: block;
width: 100%;
text-align: left;
border-collapse: collapse;
}
tbody {
max-height: 300px;
overflow-y: auto;
}
我什么都试过了。父级有 100% 的宽度。我唯一能做的就是在整个桌子周围放一个包装器，并使包装器 overflow-y: auto; max-height: #px; 但这并不是我真正想要的（没有静态标题）。我想明天睡一觉后我可以尝试一个粘性标题，但我希望你们中的一位大师能启发我。
我收回这一点，我确实设法在 SO 上找到了解决方案，但我不得不使用 table-layout: fixed 或使用损坏的单元格对齐。没有布埃诺。
...无论如何滚动条都不会滚动（不点击并按住）！
我将在下面包括整个内容。我猜它与 flexBox 有关，但我可能错得离谱。也可能是我搞砸了一些人工制品。
<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>
CSS is on Pastebin.com due to character limits.
解决方法
我设法在 position:sticky 元素上使用 th 获得了您正在寻找的东西。
它说明您实际上不能在 thead 或 tr 元素上使用 position:sticky，而这可能是您最初尝试在使用 sticky 时尝试执行的操作。
解决方案
.table-wrapper {
height: 300px;
overflow-y: auto;
}
thead > tr > th {
position: sticky;
top: 0;
background-color: black; //for clarity
}