没有填充或边距：是什么让我的 table 无法获得 100% 的宽度？＆为什么将鼠标悬停在可滚动的 el. 上时滚动条不随滚轮滚动？

Question

我几乎只想在 tbody 上设置 max-height 并将 overflow-y 更改为自动，这样我就有了静态 header 和可滚动 body.

可能像这样：

    table {
            display: block;
            width: 100%;
            text-align: left;
            border-collapse: collapse;
        }

    tbody {
            max-height: 300px;
            overflow-y: auto;
        }

我什么都试过了。 Parent 的宽度为 100%。我唯一能做的就是在整个 table 周围放置一个包装器，然后制作包装器 overflow-y: auto; max-height: #px; 但这并不是我真正想要的（没有静态 header）。我想明天睡一觉后我可以试试粘性的 header 但我希望你们中的一位大师能启发我。

我收回那句话，我确实设法在 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>9.23</h3>
        </section>
        <section>
            <span class="caption pad-top">This Month</span>
            <h3>,439.01</h3>
        </section>
        <section>
            <span class="caption pad-top">YTD</span>
            <h3>,048.79</h3>
        </section>
    </div>
    <!-- bottom -->
    <div class="row">
        <section>
            <span class="caption pad-top">Open Positions</span>
            <h3>.45 / ,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>.45</h3>
            <hr class="colored" width="100%">
            <p>Kraken</p>
        </section>
    </div>
    <div class="row">
        <section>
            <span class="caption pad-top">Log</span>
            <h3>.45</h3>
            <hr class="colored" width="100%">
            <p>Kraken</p>
        </section>
    </div>
</main>

</body>

CSS is on Pastebin.com due to character limits.

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

没有填充或边距：是什么让我的 table 无法获得 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.?

html

css

html-table

css-tables

解决方案

没有填充或边距：是什么让我的 table 无法获得 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.?

html

css

html-table

css-tables

解决方案

没有填充或边距：是什么让我的 table 无法获得 100% 的宽度？＆为什么将鼠标悬停在可滚动的 el. 上时滚动条不随滚轮滚动？