таблица html с фиксированными заголовками css, выглядывающими сверху

Question

У меня есть таблица в html, я могу исправить заголовок, чтобы при прокрутке пользователя заголовок оставался видимым. Моя проблема сейчас в том, что над заголовком выглядывают некоторые данные, и я не могу их выделить go.

вот мой css, который делает джойстик и показывает полосу прокрутки, а ниже показано, как устроен мой стол

.scroll-section {
  overflow: auto;
  height: 650px;
}
table thead tr th {
  position: -webkit-sticky; 
  position: sticky;
  top: 0;
  z-index: 5;
  background: #CACACA;
}
<div class="box-body scroll-section">
     <table class="table table-grid table-bordered table-hover txt-right fixed">
                <thead>
                  <tr>
                    <th class="txt-left">
                       Name 1
                    </th>
                    <th class="txt-left">
                       Name 2
                    </th>
                  </tr>
                </thead>
                <tbody>
                    <tr>
                      <td class="txt-left"></td>
                      <td class="txt-left"></td>
                    </tr>
                </tbody>
              </table>
  </div>

, что происходит ниже, смотрите выделенный желтым цветом данные просматриваются над заголовком при прокрутке вверх / вниз. Как это исправить пожалуйста? Я попробовал заполнение, наложив на него метку с css, чтобы она перекрывалась (что нехорошо, так как у меня много таблиц, делающих это), я попытался сделать шрифт white et c.