ਫਲੈਕਸਬਾਕਸ ਲੇਆਉਟ ਨਾਲ ਮਲਟੀ-ਸਕ੍ਰੌਲਿੰਗ ਟੇਬਲ

CSS

#parent {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
}

table {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-height: 400px;
    border: 1px solid #ccc;
    border-collapse: collapse;
    overflow: hidden;
}

thead {
    flex: 1 0 auto;
    display: block;
    overflow-x: hidden;
/*
Keep header columns aligned with useless scrollbar.
For IE11, use "dead area" color to hide scrollbar functions
*/
overflow-y: scroll;
    scrollbar-base-color: #ccc;
    scrollbar-face-color: #ccc;
    scrollbar-highlight-color: #ccc;
    scrollbar-track-color: #ccc;
    scrollbar-arrow-color: #ccc;
    scrollbar-shadow-color: #ccc;
}

thead::-webkit-scrollbar { display: block; background-color: transparent; }
thead::-webkit-scrollbar-track { background-color: transparent; }

/* Scroll the actual tbody (second child on all browsers) */
tbody {
    display: block;
    overflow: scroll;
}

/* IE11 adds an extra tbody, have to hide it */
tbody:nth-child(3) { display: none; }

/* The one caveat, a hard-set width is required. */
td, th {
    width: 10em;
    min-width: 10em;
    padding: 0.3em;
    border: 1px solid #ddd;
    background-color: white;
}

td:first-child,
th:first-child {
    position: sticky;
    position: -webkit-sticky;
    left:0;
}

tr td:first-child, 
tr th:first-child {
    width: 20em;
    background: white;
    z-index: 99;
}

ਜਾਵਾਸਕ੍ਰਿਪਟ

function fixscroll() {
    const thead = document.getElementById("myhead");
    const tbodyScroll = document.getElementById("mybody").scrollLeft;
    thead.scrollLeft = tbodyScroll;
}

HTML

<div id="parent">
    <table>
        <thead id="myhead">
            <tr>
                <th>Column 1</th>
                <th colspan="4">Column 2</th>
                <th colspan="4">Column 6</th>
                <th>Column 10</th>
            </tr>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
                <th>Column 6</th>
                <th>Column 7</th>
                <th>Column 8</th>
                <th>Column 9</th>
                <th>Column 10</th>
            </tr>
        </thead>
        <tbody id="mybody" onscroll="fixscroll()">
            <tr>
                <td>First Row</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>First Row</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>First Row</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>First Row</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>First Row</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>First Row</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>First Row</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>First Row</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>First Row</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>First Row</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>First Row</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>First Row</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>First Row</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>First Row</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>First Row</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>First Row</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
        </tbody>
    </table>
</div>
Demo
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Table Fixed Header</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
       * {
            font-family: sans-serif;
        }

        #parent {
            width: 100%;
            max-height: 400px;
            overflow: hidden;
        }

        table {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            width: 100%;
            max-height: 400px;
            border: 1px solid #ccc;
            border-collapse: collapse;
            overflow: hidden;
        }

        thead {
            flex: 1 0 auto;
            display: block;
            overflow-x: hidden;
        /*
        Keep header columns aligned with useless scrollbar.
        For IE11, use "dead area" color to hide scrollbar functions
        */
        overflow-y: scroll;
            scrollbar-base-color: #ccc;
            scrollbar-face-color: #ccc;
            scrollbar-highlight-color: #ccc;
            scrollbar-track-color: #ccc;
            scrollbar-arrow-color: #ccc;
            scrollbar-shadow-color: #ccc;
        }

        thead::-webkit-scrollbar { display: block; background-color: transparent; }
        thead::-webkit-scrollbar-track { background-color: transparent; }

        /* Scroll the actual tbody (second child on all browsers) */
        tbody {
            display: block;
            overflow: scroll;
        }

        /* IE11 adds an extra tbody, have to hide it */
        tbody:nth-child(3) { display: none; }

        /* The one caveat, a hard-set width is required. */
        td, th {
            width: 10em;
            min-width: 10em;
            padding: 0.3em;
            border: 1px solid #ddd;
            background-color: white;
        }

        td:first-child,
        th:first-child {
            position: sticky;
            position: -webkit-sticky;
            left:0;
        }

        tr td:first-child, 
        tr th:first-child {
            width: 20em;
            background: white;
            z-index: 99;
        }
    </style>

    <script>
        function fixscroll() {
            const thead = document.getElementById("myhead");
            const tbodyScroll = document.getElementById("mybody").scrollLeft;
            thead.scrollLeft = tbodyScroll;
            //document.getElementById("frozen").scrollLeft = 0;
        }
    </script>
</head>
<body>
  <div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Example of multi-scrolling table with flexbox layout</h1>
            <div id="parent">
                <table>
                    <thead id="myhead">
                        <tr>
                            <th>Column 1</th>
                            <th colspan="4">Column 2</th>
                            <th colspan="4">Column 6</th>
                            <th>Column 10</th>
                        </tr>
                        <tr>
                            <th>Column 1</th>
                            <th>Column 2</th>
                            <th>Column 3</th>
                            <th>Column 4</th>
                            <th>Column 5</th>
                            <th>Column 6</th>
                            <th>Column 7</th>
                            <th>Column 8</th>
                            <th>Column 9</th>
                            <th>Column 10</th>
                        </tr>
                    </thead>
                    <tbody id="mybody" onscroll="fixscroll()">
                        <tr>
                            <td>First Row</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                        </tr>
                        <tr>
                            <td>First Row</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                        </tr>
                        <tr>
                            <td>First Row</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                        </tr>
                        <tr>
                            <td>First Row</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                        </tr>
                        <tr>
                            <td>First Row</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                        </tr>
                        <tr>
                            <td>First Row</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                        </tr>
                        <tr>
                            <td>First Row</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                        </tr>
                        <tr>
                            <td>First Row</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                        </tr>
                        <tr>
                            <td>First Row</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                        </tr>
                        <tr>
                            <td>First Row</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                        </tr>
                        <tr>
                            <td>First Row</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                        </tr>
                        <tr>
                            <td>First Row</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                        </tr>
                        <tr>
                            <td>First Row</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                        </tr>
                        <tr>
                            <td>First Row</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                        </tr>
                        <tr>
                            <td>First Row</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                        </tr>
                        <tr>
                            <td>First Row</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
  </div>
</body>

</html>