固定可滚动表格的标题答案

【问题标题】：To pin the caption of the scrollable table固定可滚动表格的标题
【发布时间】：2019-12-19 04:16:02
【问题描述】：

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

我已经尝试过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>

【问题讨论】：

您是否尝试在caption 元素上设置position: sticky？
是的。它提供了一些的效果，但它太丑了：jsfiddle.net/zs7Ldhea
上一个问题：stackoverflow.com/questions/57442166/…

标签： javascript jquery html css html-table

【解决方案1】：

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

table {
    margin-bottom: 0;
}

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

caption {
    text-align: left;
    position: absolute;
    z-index: 99;
    margin-top: -68px;
    display: table-header-group;
}

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

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>
<div class="outer">
<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>
</div>

这就是您想要实现的（适用于 Chrome 和 safari）现在它正在工作

【讨论】：

【解决方案2】：

瑞诗凯诗帕尔回答的改进版本。

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>

【讨论】：