To Pin The Caption Of The Scrollable Table

Here is a table with pinned row and column. I'm trying to improve it by pinning the caption as well. I.e. when you scroll the table, the caption should not be scrolled - it should

Solution 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, tdp {
    white-space: nowrap;
}

tdp {
    margin-top: 0;
}

tdp: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><divclass="outer"><divclass="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>

This is what you want to achieve (works in Chrome and safari) Now it is working

Solution 2:

Improved version of Rishikesh Pal's answer.

• CSS is now improved over my original code: added support for text wrap and narrow tables.
• The caption-related margins are now calculated through jQuery, instead of being hard-coded.

<scriptsrc="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;
    }

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

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

    .scrollableth, .scrollabletd {
        border-bottom: 1px solid gray;
        max-width: 10em;
        padding: 0.25em0.5em;
        vertical-align: top;
    }

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

    .scrollableth:first-of-type, .scrollabletd:first-of-type {
        left: 0;
        position: sticky;
    }

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

    .scrollabletd:first-of-type {
        background: rgb(205, 255, 205);
        z-index: 1;
    }
</style><p>Paragraph 1.</p><p>Paragraph 2.</p><divclass="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><divclass="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><divclass="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>