Таблица с липким заголовком и липким первым столбцом, но содержимое первого столбца переполняется под заголовком - только с CSS

Question

как говорит заголовок, у меня есть таблица с липким заголовком и липким первым столбцом, и я бы хотел, чтобы первый столбец переполнялся под заголовком. В приведенном ниже примере JS, при движении первый столбец переполняется над заголовком.

Как я могу это сделать? (без внешней библиотеки, если это возможно)

js -fiddle: https://jsfiddle.net/base_kh/oe9ytg2m/33/

таблица:

<div class="table-responsive">

  <table class="table calendar">
    <thead>
      <tr>
        <th>
          <div class="row">
            <div class="col"></div>
            <div class="col"></div>
          </div>
        </th>
        <th>
          <div class="row">
            <div class="col">1</div>
            <div class="col">M</div>
          </div>
        </th>
        <th>
          <div class="row">
            <div class="col">2</div>
            <div class="col">T</div>
          </div>
        </th>
        <th>
          <div class="row">
            <div class="col">3</div>
            <div class="col">W</div>
          </div>
        </th>
        <th>
          <div class="row">
            <div class="col">4</div>
            <div class="col">T</div>
          </div>
        </th>
        <th>
          <div class="row">
            <div class="col">5</div>
            <div class="col">F</div>
          </div>
        </th>
        <th>
          <div class="row">
            <div class="col">6</div>
            <div class="col">S</div>
          </div>
        </th>
        <th>
          <div class="row">
            <div class="col">7</div>
            <div class="col">S</div>
          </div>
        </th>
        <th>
          <div class="row">
            <div class="col">8</div>
            <div class="col">M</div>
          </div>
        </th>
        <th>
          <div class="row">
            <div class="col">9</div>
            <div class="col">T</div>
          </div>
        </th>
        <th>
          <div class="row">
            <div class="col">10</div>
            <div class="col">W</div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody id="table-body">
      <tr>
        <th class="sticky-col">
          <div>Title 1</div>
        </th>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
      </tr>
      <tr>
        <th class="sticky-col">
          <div>Title 2</div>
        </th>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
      </tr>
      <tr>
        <th class="sticky-col">
          <div>Title 3</div>
        </th>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
      </tr>
      <tr>
        <th class="sticky-col">
          <div>Title 4</div>
        </th>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
      </tr>
      <tr>
        <th class="sticky-col">
          <div>Title 5</div>
        </th>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
      </tr>
      <tr>
        <th class="sticky-col">
          <div>Title 6</div>
        </th>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
      </tr>
      <tr>
        <th class="sticky-col">
          <div>Title 7</div>
        </th>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
      </tr>
      <tr>
        <th class="sticky-col">
          <div>Title 8</div>
        </th>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
      </tr>
      <tr>
        <th class="sticky-col">
          <div>Title 9</div>
        </th>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
      </tr>
      <tr>
        <th class="sticky-col">
          <div>Title 10</div>
        </th>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
      </tr>
      </tbody>
    </table>

  </div>

и css:

.table-responsive {
  height: 500px;
}

.table.calendar thead {
  position: sticky;
  top: 0px;
  background: pink;
}

.sticky-col {
    position: sticky;
    left: 0px;
    width: 6em;
    background: white;
    background-clip: padding-box;
    border-bottom: 1px solid #E2E2E2;
    font-weight: normal;
    font-size: 14px;
    z-index: 2;
}

Answer 1

, если я вас правильно понял - простое добавление z-index к вашей команде css сделает все маги c. Итак

.table.calendar thead {
  position: sticky;
  top: 0px;
  background: pink;
  z-index:3;
}