如何使用Bootstrap将3个不同的表均匀地相互对齐？

Question

我试图调整所有三个表。您可以看到第二个表中的第二列未与表1和3对齐。我需要解决此问题。我正在使用CSS和Bootstrap在ASP.NET Core 2.0中进行前端开发。

我已经尝试过在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">[email protected]</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">[email protected]</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">[email protected]</td>
            </tr>

        }
    </tbody>
</table>

我会尽快为这个问题添加图片。

Picture is here

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>