Стиль для двухстрочного заголовка

у меня есть таблица html с двумя строками в качестве заголовка. Я использую вторую строку для раскрывающегося списка фильтров. поэтому в самой таблице пусто.

    <table class="tg wrap stripe" id="tableData">
        <thead>
            <tr>
                <th class="header-left">Name</th>
                <th class="header-left">Position</th>
                <th class="header-left">Office</th>
                <th class="header-center">Age</th>
                <th class="header-center">Start date</th>
                <th class="header-right">Salary</th>
            </tr>
            <tr>
                <th class="header-left"></th>
                <th class="header-left"></th>
                <th class="header-left"></th>
                <th class="header-center"></th>
                <th class="header-center"></th>
                <th class="header-right"></th>
            </tr>
        </thead>
        <tbody>
            <tr> ... </tr>
            ...

Теперь я хочу показать только внутренние вертикальные границы и нижнюю границу заголовка. Поэтому я использую это:

    .tg tr  td:first-child, th:first-child{
            border-left: none;
        }
    .tg tr  td:last-child, th:last-child{
            border-right: none;
        }
    .tg tr td, th {
            border-right: none;
            border-top: none;
            border-bottom: none;
        }

Ширина границы установлена ​​​​на 1px, а также установлена ​​border-collapse:collapse. Но каким-то образом я могу нарисовать нижнюю строку ниже заголовка (только ниже второй строки заголовка). я уже пробовал:

    .tg tr thead:last-child{
            border-bottom: 1px;
            }

и

    .tg tr th:last-child{
            border-bottom: 1px;
            }

безуспешно.

.tg tr td:first-child, th:first-child{
  border-left: none;
}
.tg tr td:last-child, th:last-child{
  border-right: none;
}
.tg tr td, th {
  border-right: none;
  border-top: none;
  border-bottom: none;
}

.tg tr thead:last-child{
  border-bottom: 1px;
}
.tg tr th:last-child{
  border-bottom: 1px;
}

<table class="tg wrap stripe" id="tableData">
  <thead>
    <tr>
      <th class="header-left">Name</th>
      <th class="header-left">Position</th>
      <th class="header-left">Office</th>
      <th class="header-center">Age</th>
      <th class="header-center">Start date</th>
      <th class="header-right">Salary</th>
    </tr>
    <tr>
      <th class="header-left"></th>
      <th class="header-left"></th>
      <th class="header-left"></th>
      <th class="header-center"></th>
      <th class="header-center"></th>
      <th class="header-right"></th>
    </tr>
  </thead>
  <tbody>
    <tr> ... </tr>
  </tbody>
</table>

Кто может мне помочь?

С уважением