How to align columns of two tables?

Question

HTML

To make the columns match, it looks like this now:

Code:

spoiler

<div class="table-responsive">
    <table class="table table-hover table-bordered table-sm">
        <thead>
        <tr>
            <th class='text-center'>Герой</th>
            <th class='text-center'>Роль / Линия</th>
            <th class='text-center'>Игрок</th>
            <th class='text-center'>УР.</th>
            <th class='text-center'>У</th>
            <th class='text-center'>С</th>
            <th class='text-center'>П</th>
           ...
        </tr>
        </thead>
    <tbody>
   <tr>
        <th class='text-center'>
        <td class='text-center'>
        ...
    </tr>
   </tbody>

Answer 1

The most simple - to make one table.