javascript - 固定可滚动表格的标题

Question

这是一个带有固定行和列的表格。我也在尝试通过固定标题来改进它。即当您滚动表格时，不应滚动标题 - 它应该永久可见。可能吗？

我已经试过了caption-side: top-outside，但是：

• top-outside仅适用于 Firefox。相反，我的目标浏览器是 Chrome。
• 似乎它根本无法解决任务。

.wrapper {
    height: 200px;
    overflow-x: auto;
    width: 500px;
}

caption, th, p {
    font-size: x-large;
}

caption {
    text-align: left;
}

th {
    background: rgba(255, 225, 225);
    position: sticky;
    top: 0;
}

th:first-of-type, td:first-of-type {
    left: 0;
    position: sticky;
}

th:first-of-type {
    z-index: 2;
}

td:first-of-type {
    background: rgba(225, 255, 225);
    z-index: 1;
}

th, td p {
    white-space: nowrap;
}

td p {
    margin-top: 0;
}

td p:last-child {
    margin-bottom: 0;
}

th, td {
    border-bottom: 1px dashed red;
}

<div class="wrapper">
    <table>
        <caption>Caption</caption>
        <thead>
            <tr>
                <th>Column 1 aaa aaa aaa</th>
                <th>Column 2 bbb bbb bbb</th>
                <th>Column 3 ccc ccc ccc</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
        </tbody>
    </table>
</div>

标签： javascriptjqueryhtmlcsshtml-table

Answer 1

Rishikesh Pal 答案的改进版本。

• CSS 现在比我的原始代码有所改进：增加了对文本换行和窄表的支持。
• 与标题相关的边距现在通过 jQuery 计算，而不是硬编码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('.scrollable').each(function() {
            var caption = $(this).find('caption');
            var th = $(this).find('th');
            var captionHeight = caption.outerHeight(true);
            var thHeight = th.outerHeight();
            var totalHeight = captionHeight + thHeight;
            caption.css({marginTop: '-' + totalHeight + 'px'});
            $(this).css({marginTop: 'calc(' + captionHeight + 'px' + ' + 1em)'});
        });
    });
</script>

<style>
    body {
        margin: auto;
        width: 25em;
    }

    .scrollable {
        margin-bottom: 1em;
        max-height: 15em;
        overflow: auto;
    }

    .scrollable table {
        border-spacing: 0;
        margin-bottom: 0;
        min-width: 100%;
        width: max-content;
    }

    .scrollable caption {
        font-size: smaller;
        padding-bottom: 0.5em;
        position: absolute;
        text-align: left;
        width: 25em;
        z-index: 3;
    }

    .scrollable th, .scrollable td {
        border-bottom: 1px solid gray;
        max-width: 10em;
        padding: 0.25em 0.5em;
        vertical-align: top;
    }

    .scrollable th {
        background: rgb(255, 205, 205);
        position: sticky;
        text-align: left;
        top: 0;
    }

    .scrollable th:first-of-type, .scrollable td:first-of-type {
        left: 0;
        position: sticky;
    }

    .scrollable th:first-of-type {
        z-index: 2;
    }

    .scrollable td:first-of-type {
        background: rgb(205, 255, 205);
        z-index: 1;
    }
</style>

<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<div class="scrollable">
    <table>
        <caption>Table 1 aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa</caption>
        <thead>
            <tr>
                <th>Column 1 aaa aaa aaa aaa aaa</th>
                <th>Column 2 bbb bbb bbb</th>
                <th>Column 3 ccc ccc ccc</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb bbb bbb bbb bbb</p><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="scrollable">
    <table>
        <caption>Table 2</caption>
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><p>Column 1</p></td>
                <td><p>Column 2</p><p>Column 2</p></td>
                <td><p>Column 3</p></td>
            </tr>
            <tr>
                <td><p>Column 1</p></td>
                <td><p>Column 2</p></td>
                <td><p>Column 3</p></td>
            </tr>
            <tr>
                <td><p>Column 1</p></td>
                <td><p>Column 2</p></td>
                <td><p>Column 3</p></td>
            </tr>
            <tr>
                <td><p>Column 1</p></td>
                <td><p>Column 2</p></td>
                <td><p>Column 3</p></td>
            </tr>
            <tr>
                <td><p>Column 1</p></td>
                <td><p>Column 2</p></td>
                <td><p>Column 3</p></td>
            </tr>
            <tr>
                <td><p>Column 1</p></td>
                <td><p>Column 2</p></td>
                <td><p>Column 3</p></td>
            </tr>
            <tr>
                <td><p>Column 1</p></td>
                <td><p>Column 2</p></td>
                <td><p>Column 3</p></td>
            </tr>
            <tr>
                <td><p>Column 1</p></td>
                <td><p>Column 2</p></td>
                <td><p>Column 3</p></td>
            </tr>
            <tr>
                <td><p>Column 1</p></td>
                <td><p>Column 2</p></td>
                <td><p>Column 3</p></td>
            </tr>
            <tr>
                <td><p>Column 1</p></td>
                <td><p>Column 2</p></td>
                <td><p>Column 3</p></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="scrollable">
    <table>
        <caption>Copy of Table 1 aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa</caption>
        <thead>
            <tr>
                <th>Column 1 aaa aaa aaa aaa aaa</th>
                <th>Column 2 bbb bbb bbb</th>
                <th>Column 3 ccc ccc ccc</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb bbb bbb bbb bbb</p><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
        </tbody>
    </table>
</div>