Избавление от атрибута width и использование чего-то другого для выравнивания обоих текстов

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>

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

Answer 1

Я бы избавился от% widths и попытался бы объединить таблицы в одну. используйте css, чтобы установить ширину каждого столбца, если необходимо, и выровняйте столбцы по своему вкусу. это даст вам согласованное горизонтальное выравнивание текста по всем столбцам и позволит вам контролировать стиль каждой строки или столбца соответственно.

.table {
  width: 100%;
  
}

.table tr {
  text-align: left;
}

.table th {
  /* style however you like for the header row here */
  font-weight: bold;
}


/* use n-th child value select which column you'd like to style differently from default */
.table td:nth-child(5), .table th:nth-child(5) {
  text-align: right;
}

<table class="table">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Money</th>
    <th>Job</th>
    <th>Group</th>
    <th>WP</th>
    <th>Ping</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>' ..playerID.. '</td>
    <td>' .. sanitize(name) .. '</td>
    <td>' .. (money) .. '</td>
    <td>' .. job .. '</td>
    <td>' .. group .. '</td>
    <td>' .. wantedLevel .. '</td>
    <td>' .. ping .. '</td>
    <td>' .. country .. '</td>
  </tr>
</table>