Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Html Table / Javascript / Jquery

To Pin The Caption Of The Scrollable Table

Post a Comment
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, 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>

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.
<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>

Post a Comment for "To Pin The Caption Of The Scrollable Table"