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

Question

[just_clarity]

Чтобы столбцы совпадали, сейчас это выглядит так:

Код:

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>

Comments

[ma4t]

Сейчас ширина у Вас зависит от контентной части, видимо, раз столбцы не совпадают, в нижней таблице контента меньше, соотвественно, таблица ужалась. Вам нужно чтобы совпадало.
Есть вариант определить максимальную ширину контента в столбце и жестко задать ее.
Т.е. столбец игрок, максимальное число знаков ( к примеру) там 10, больше быть не может, а меньше да.
Тогда задаем этому столбцу в обеих таблицах width: 100рх, или min-width: 100px. Полную жесткость лучше не делать все-таки.

Я вижу решение таким способом.

[just_clarity]

ma4t, как вариант! Спасибо.

Answer 1

[Rsa97]

Самое простое - сделать одной таблицей.

Comments

[just_clarity]

Еще варианты?

[Rsa97]

just_clarity, Задать фиксированные пропорции колонок через colgroup/col