实现左侧双固定表头响应式表格遇问题：左侧第二个表头覆盖第一个

我要做一个左侧带有两个固定表头的响应式表格，实现表格主体可滚动、左侧表头固定的效果。预期效果为：左侧有一个跨8行的纵向表头，旁边是每行对应的子表头，两个表头都固定在左侧，不会随表格内容滚动而移动。

我给每个表头添加了position: sticky和z-index属性，但现在出现了左侧第二个表头（每行的子表头）覆盖第一个表头（跨多行的纵向表头）的问题。

我的代码： #

<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>
                // 数据内容
            </tr>
            <tr>
                <th scope="row" style="position: sticky; left: 0; z-index: 1;">Act</th>
             // 数据内容
            </tr>
            <tr>
                <th scope="row" style="position: sticky; left: 0; z-index: 1;">F/G</th>
                // 数据内容
            </tr>
            <tr>
                <th scope="row" style="position: sticky; left: 0; z-index: 1;">Kum P</th>
                // 数据内容
            </tr>
            <tr>
                <th scope="row" style="position: sticky; left: 0; z-index: 1;">Kum A</th>
               // 数据内容 
            </tr>
            <tr>
            <th scope="row" style="position: sticky; left: 0; z-index: 1;">Kum F/G</th>
                // 数据内容
            </tr>
            <tr>
            <th scope="row" style="position: sticky; left: 0; z-index: 1;">Blc P</th>
                 // 数据内容
            </tr>
            <tr>
            <th scope="row" style="position: sticky; left: 0; z-index: 1;">Blc D</th>
                // 数据内容
            </tr>
        </tbody>
        </table>
    </div>

实际效果： #

左侧跨8行的纵向表头被每行的子表头覆盖，无法完整显示。

内容的提问来源于stack exchange，提问作者Amri