Как автоматически выровнять эти тексты вместе

Question

Возможно ли выровнять эти тексты друг с другом автоматически?

Я хочу выровнять розовое слово с group Вверху, чтобы они оба совпадали на одном уровне

#title {
  float: left;
  margin-left: 15px;
  padding-left: 15px;
  padding-top: 5px;
  font-size: 0.5vw;
  font-family: 'Armata';
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
  text-align: center;
}

<!-- This the table texts at the top -->

<table id="topTable" width="100%">
  <tr class="heading">
    <th width='1%'>ID</th>
    <th width='15%'>Name</th>
    <th width='5%'>Money</th>
    <th width='25%'>Job</th>
    <th width='15%'>Group</th>
    <th width='5%'>WP</th>
    <th width='5%'>Ping</th>
    <th width='1%'>Country</th>
  </tr>
</table>

<!-- This the pink table i want to align with the one at the top -->

<tr class="playersTable">
  <th width="5%">' ..playerID.. '</th>
  <th width="25%">' .. sanitize(name) .. '</th>
  <th width="15%">' .. (money) .. '</th>
  <th width="15%">' .. job .. '</th>
  <th width="15%">' .. group .. '</th>
  <th width="5%">' .. wantedLevel .. '</th>
  <th width="5%">' .. ping .. '</th>
  <th width="15%">' .. country .. '</th>
</tr>

Я хочу избавиться от этой ширины и, надеюсь, сделать это автоматически, извините, если что-то не понятно.