Как выровнять ширину столбцов в 2 таблицах?

Question

У меня есть две таблицы, которые семантически различаются, поэтому их следует хранить отдельно, ИМХО.Тем не менее, я хотел бы выровнять их столбцы.Просмотр SO Я обнаружил, что шириной столбцов в таблице можно управлять, задав w- -классы в thead.Это работало хорошо для 2-й таблицы (с которой я начинал).Но когда я добавил первую таблицу поверх нее, произвела поражение - не только их столбцы не выравниваются, но даже отношение ширины столбцов, похоже, не соответствует w- -значениям.

Fiddle здесь .

thead таблицы 1:

<thead class="bg-secondary">
  <tr>
    <th class="w-8">Model Name</th>
    <th class="w-8">Y</th>
    <th class="w-15">S</th>
    <th class="w-15">R<sup>2</sup>(%)</th>
    <th class="w-15">R<sup>2</sup>-Adj (%)</th>
    <th class="w-39">&nbsp;</th>
  </tr>
</thead>

и таблицы 2:

<thead class="bg-secondary">
  <tr>
    <th class="w-8">Var</th>
    <th class="w-8">Include</th>
    <th class="w-15">Expression</th>
    <th class="w-15">Coefficient</th>
    <th class="w-15">StdErr</th>
    <th class="w-15">T</th>
    <th class="w-15">P</th>
    <th class="w-9">&nbsp;</th>
  </tr>
</thead>

Answer 1

В Bootstrap 4 отсутствует w-8, w-15 и т. Д. ...

Классы определения ширины: w-25, w-50, w-75, w-100 и w-auto.

См. Документы: http://getbootstrap.com/docs/4.1/utilities/sizing/