Как выровнять 3 разных таблицы равномерно друг к другу, стилизованные с помощью Bootstrap?

Question

Я пытаюсь выровнять все три таблицы.Вы можете видеть, что 2-й столбец во 2-й таблице не выровнен по таблицам 1 и 3. Мне нужно это исправить.Я занимаюсь разработкой в ​​ASP.NET Core 2.0 с использованием CSS и Bootstrap для внешнего интерфейса.

Я уже пытался найти справку по StackOverFlow.Я использовал этот CSS, чтобы попытаться изменить поведение.

.table > tbody > tr > td,
.table > tbody > tr > th, .table > tfoot > tr > td,
.table > tfoot > tr > th, .table > thead > tr > td,
.table > thead > tr > th {
    vertical-align: middle;
}

<table class="table">
    <thead>
        <tr>
            <th class="tdheader">Size</th>
            <th class="tdheader">Cost</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Sizes)
        {
            <tr>
                <td class="white">@item.Type</td>
                <td class="white">$@item.Cost</td>
            </tr>

        }
    </tbody>
</table>
<br />

<table class="table">
    <thead>
        <tr>
            <th class="tdheader">Crust</th>
            <th class="tdheader">Cost</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Crusts)
        {
            <tr>
                <td class="white">@item.Type</td>
                <td class="white">$@item.Cost</td>
            </tr>

        }
    </tbody>
</table>
<br />
<table class="table">
    <thead>
        <tr>
            <th class="tdheader">Topping</th>
            <th class="tdheader">Cost</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Toppings)
        {
            <tr>
                <td class="white">@item.Type</td>
                <td class="white">$@item.Cost</td>
            </tr>

        }
    </tbody>
</table>

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

Изображение здесь

Answer 1

Попробуйте использовать table-fixed, чтобы зафиксировать ширину столбцов:

 <style>
    .table > tbody > tr > td,
    .table > tbody > tr > th, .table > tfoot > tr > td,
    .table > tfoot > tr > th, .table > thead > tr > td,
    .table > thead > tr > th {
        vertical-align: middle;
    }
    table {
        table-layout: fixed;
    }

    table td {
        width: 50%;
    }
</style>