没有填充或边距：是啥让我的表格无法获得 100% 的宽度？ & 为啥当鼠标悬停在可滚动的 el 上时滚动条不随滚轮滚动？
Posted
技术标签:
【中文标题】没有填充或边距：是啥让我的表格无法获得 100% 的宽度？ & 为啥当鼠标悬停在可滚动的 el 上时滚动条不随滚轮滚动？【英文标题】：No padding or margin: what's keeping my table from getting 100% width? & why do scrollbars not scroll with wheel when hovering over scrollable el.?没有填充或边距：是什么让我的表格无法获得 100% 的宽度？ & 为什么当鼠标悬停在可滚动的 el 上时滚动条不随滚轮滚动？ 【发布时间】：2021-05-24 07:34:09 【问题描述】：我几乎只想在 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 或使用损坏的单元格对齐。没有bueno。
...而且无论该死的滚动条是什么都不会滚动（无需单击并按住）！
我将在下面包含整个内容。我猜它与 flexbox 有关，但我可能大错特错。可能还有一些我在搞砸的文物。
<body>
<aside>
<!-- logo -->
<img src="./svg/heartbeat.svg" class="logo" >
<!-- nav -->
<nav>
<span class="bundle">
<img src="./svg/home.svg" >
<span class="caption">home</span>
</span>
<span class="bundle">
<img src="./svg/account.svg" >
<span class="caption">account</span>
</span>
<span class="bundle">
<img src="./svg/stats.svg" >
<span class="caption">statistics</span>
</span>
<span class="bundle">
<img src="./svg/settings.svg" >
<span class="caption">settings</span>
</span>
</nav>
<!-- footer -->
<footer>
<span class="bundle">
<img src="./svg/discord.svg" >
<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" >
<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" ></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" ></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" ></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" ></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" ></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" ></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" ></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" ></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" ></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" ></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" ></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" ></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" ></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" ></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" ></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" ></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" ></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" ></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" ></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" ></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" ></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" ></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" ></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" ></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" ></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" ></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" ></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" ></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" ></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" ></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" ></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" ></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" ></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" ></span><span class="tooltip" data-text="hold"><img src="./svg/hold.svg" class="action" ></span><span class="tooltip" data-text="chat"><img src="./svg/chat.svg" class="action" ></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" >
<p>Kraken</p>
</section>
</div>
<div class="row">
<section>
<span class="caption pad-top">Log</span>
<h3>$24.45</h3>
<hr class="colored" >
<p>Kraken</p>
</section>
</div>
</main>
</body>
CSS is on Pastebin.com due to character limits.
【问题讨论】：
【参考方案1】：我设法在th 元素上使用position:sticky 获得了您正在寻找的东西。
Take a look at this article
它说明您实际上不能在 thead 或 tr 元素上使用 position:sticky，这可能是您在使用sticky 时最初尝试做的事情。
解决方案
.table-wrapper
height: 300px;
overflow-y: auto;
thead > tr > th
position: sticky;
top: 0;
background-color: black; //for clarity
【讨论】：
感谢您的帮助！以上是关于没有填充或边距：是啥让我的表格无法获得 100% 的宽度？ & 为啥当鼠标悬停在可滚动的 el 上时滚动条不随滚轮滚动？的主要内容，如果未能解决你的问题，请参考以下文章