时间戳

首页 > 解决方案 > 没有填充或边距：是什么让我的表格无法获得 100% 的宽度？& 为什么当鼠标悬停在可滚动的 el 上时滚动条不随滚轮滚动？

html - 没有填充或边距：是什么让我的表格无法获得 100% 的宽度？& 为什么当鼠标悬停在可滚动的 el 上时滚动条不随滚轮滚动？

问题描述

我几乎只想在 tbody 上设置一个最大高度并将溢出-y 更改为自动，这样我就有了一个静态标题和可滚动的正文。

可能像这样：

    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 在 Pastebin.com 上。

标签： htmlcsshtml-tablecss-tables

解决方案

我设法得到了类似于您在元素上使用position:sticky的th东西。

看看这篇文章

它说明您实际上不能使用 position:sticky onthead或tr元素，这可能是您在使用sticky 时最初尝试做的事情。

解决方案

.table-wrapper {
  height: 300px;
  overflow-y: auto;
}

thead > tr > th {
  position: sticky;
  top: 0;
  background-color: black; //for clarity
}

推荐阅读