Set Up Table Fixed Element with 2 Head

Question

I try to set up a responsive table with 2 fixed header in left, so the body is scrollable but the left header is fixed.

I expect the result is like this

My code:

I add position sticky and z index to each head but the second head from left is override the first head.

<div class="table-responsive" style="padding: 10px 0 0 0; overflow: auto;">
        <table class="table table-hover">
        <col />
        <col />
        <colgroup span="3"></colgroup>
        <thead>
            <tr>
            <th colspan="2"></th>
            <th colspan="31" scope="colgroup" style="text-align: center;">JANUARI</th>
            </tr>
            <tr>
            <th colspan="2" style="width: 10%"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th rowspan="8" style="position: sticky; left: 0; z-index: 1;" scope="rowgroup">Assy To GFG</th>
                <th scope="row" style="position: sticky; left: 0; z-index: 1;">Plan</th>
                // data
            </tr>
            <tr>
                <th scope="row" style="position: sticky; left: 0; z-index: 1;">Act</th>
             // data
            </tr>
            <tr>
                <th scope="row" style="position: sticky; left: 0; z-index: 1;">F/G</th>
                // data
            </tr>
            <tr>
                <th scope="row" style="position: sticky; left: 0; z-index: 1;">Kum P</th>
                // data
            </tr>
            <tr>
                <th scope="row" style="position: sticky; left: 0; z-index: 1;">Kum A</th>
               // data 
            </tr>
            <tr>
            <th scope="row" style="position: sticky; left: 0; z-index: 1;">Kum F/G</th>
                // data
            </tr>
            <tr>
            <th scope="row" style="position: sticky; left: 0; z-index: 1;">Blc P</th>
                 // data
            </tr>
            <tr>
            <th scope="row" style="position: sticky; left: 0; z-index: 1;">Blc D</th>
                // data
            </tr>
        </tbody>
        </table>
    </div>

But the result is like this

Answer 1

You can achieve this by using JQuery DataTable (as you tagged the question with jquery I will assume you could accept this kind of answer)

Simply add the jquery datatable plugin and the following script. It will be better if you write an Id for the table

$(document).ready(function() {
    var table = $('.table ').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        fixedColumns:   {
            left: 1
        }
    } );
} );

Functional example and library: https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html

When you download or select a CDN, don't forget check the option "Fixed Columns" or you can use the following:

<link href="https://cdn.datatables.net/v/dt/dt-1.13.4/fc-4.2.2/datatables.min.css" rel="stylesheet"/>
 
<script src="https://cdn.datatables.net/v/dt/dt-1.13.4/fc-4.2.2/datatables.min.js"></script>