sticky header of table with merged cells does't work

I want tos sticky this header:

I use this class:

 th {
    font-weight: bold;
    background: white !important;
    z-index: 100;
    border: 1px solid black;
    box-shadow: 0 1px 4px 0px grey;
    clip-path:inset(0 0 -10px 0);
    position: sticky;
    top: 0;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

The html code:

 <tr>
        <th rowspan="2">Column 1</th>
        <th rowspan="2">Column 2</th>
        <th rowspan="2">Column 3</th>
        <th rowspan="2">Column 4</th>
        <th colspan="3">Column 5</th>
        <th colspan="9">Column 6</th>
        <th rowspan="2">Column 7</th>
        <th colspan="2" class="fix-sign-offs-name-column">Column 8</th>
        <th rowspan="2" class="fix-save-name-column">Save</th>
      </tr>
      <tr>
        <th>Column 5.1</th>
        <th>Column 5.2</th>
        <th>Column 5.3</th>
        <th>Column 5.4</th>
        <th>Column 5.5</th>
        <th>Column 5.6</th>
        <th>Column 5.7</th>
        <th>Column 5.8</th>
        <th>Column 5.9</th>
        <th>Column 5.10</th>
        <th>Column 5.11</th>
        <th>Column 5.12</th>
        <th>
          <div style="width: 5px !important; ; text-align: center">C</div>
        </th>
        <th>
          <div style="width: 5px !important; text-align: center">C</div>
        </th>
      </tr>

but I have this result:

As you see I use colspan and rowspan to merge/fusion celles. Any suggestion to fix that. thank you.