Таблица начальной загрузки <td>ширина, кажется, изменяется

Question

У меня три стандартных Bootstrap 4 стола на месте. Однако ширины td не одинаковы для всех трех.

Я не знаю, есть ли в моей структуре утилита, которая пропустила бы ширину. Я думал, что это может быть связано с функциональностью Flex в Bootstrap 4, но ничего из того, что я добавил, похоже, не влияет на мою разметку.

Это как-то связано с количеством текста, который я пишу для каждого элемента?

<div class="row pt-2 pb-4">
    <table class="table pb-5">
        <thead class="border-0">
            <tr>
                <th class="border-top-none typeface-montserrat-500" scope="col">Content here with text</th>
                <th class="border-top-none" scope="col"></th>
                <th class="border-top-none" scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Content here</td>
                <td class="color-grey-dark">Content here</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="row pt-2 pb-4">
    <table class="table pb-5">
        <thead class="border-0">
            <tr>
                <th class="border-top-none typeface-montserrat-500" scope="col">Content here with text</th>
                <th class="border-top-none" scope="col"></th>
                <th class="border-top-none" scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Content here</td>
                <td class="color-grey-dark">Content here</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
            <tr>
                <td>Content with more text here</td>
                <td class="color-grey-dark">Content here</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
            <tr>
                <td>Content with more text here</td>
                <td class="color-grey-dark">Content here</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
            <tr>
                <td>Content here</td>
                <td class="color-grey-dark">Content here</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="row pt-2 pb-4">
    <table class="table pb-5">
        <thead class="border-0">
            <tr>
                <th class="border-top-none typeface-montserrat-500" scope="col">Content here with some different text again</th>
                <th class="border-top-none" scope="col"></th>
                <th class="border-top-none" scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Content here</td>
                <td class="color-grey-dark">Content here once more</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
            <tr>
                <td>Content with more text here</td>
                <td class="color-grey-dark">Content here</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
            <tr>
                <td>Content with more text here</td>
                <td class="color-grey-dark">Content here with even more text</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
            <tr>
                <td>Content here</td>
                <td class="color-grey-dark">Content here</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

В прошлом это было проблемой с другими таблицами начальной загрузки. Добавление style="width: 33.3333%", кажется, помогает при добавлении к каждому тегу <th>. Будет стандартизирована ширина столбцов таблицы.

Используйте этот ресурс, чтобы ответить на другие вопросы: Как настроить фиксированную ширину для ?

<div class="row  pt-2 pb-4">
    <table class="table pb-5">
        <thead class="border-0">
            <tr>
                <th style="width: 33.3333%" class="border-top-none typeface-montserrat-500" scope="col">Content here with text</th>
                <th style="width: 33.3333%" class="border-top-none" scope="col"></th>
                <th style="width: 33.3333%" class="border-top-none" scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Content here</td>
                <td class="color-grey-dark">Content here</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="row pt-2 pb-4">
    <table class="table pb-5">
        <thead class="border-0">
            <tr>
                <th style="width: 33.3333%" class="border-top-none typeface-montserrat-500" scope="col">Content here with text</th>
                <th style="width: 33.3333%" class="border-top-none" scope="col"></th>
                <th style="width: 33.3333%" class="border-top-none" scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Content here</td>
                <td class="color-grey-dark">Content here</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
            <tr>
                <td>Content with more text here</td>
                <td class="color-grey-dark">Content here</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
            <tr>
                <td>Content with more text here</td>
                <td class="color-grey-dark">Content here</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
            <tr>
                <td>Content here</td>
                <td class="color-grey-dark">Content here</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="row pt-2 pb-4">
    <table class="table pb-5">
        <thead class="border-0">
            <tr>
                <th style="width: 33.3333%" class="border-top-none typeface-montserrat-500" scope="col">Content here with some different text again</th>
                <th style="width: 33.3333%" class="border-top-none" scope="col"></th>
                <th style="width: 33.3333%" class="border-top-none" scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Content here</td>
                <td class="color-grey-dark">Content here once more</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
            <tr>
                <td>Content with more text here</td>
                <td class="color-grey-dark">Content here</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
            <tr>
                <td>Content with more text here</td>
                <td class="color-grey-dark">Content here with even more text</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
            <tr>
                <td>Content here</td>
                <td class="color-grey-dark">Content here</td>
                <td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
            </tr>
        </tbody>
    </table>
</div>