close

bảng đa cuộn với bố cục flexbox

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

Javascript

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>