close

フレックスボックスレイアウトのマルチスクロールテーブル

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>