Bootstrap table <td> widths seem to vary

Question

I have three standard Bootstrap 4 tables in place. The td widths are not consistent across all three, however.

I do not know whether there is a utility I am missing in my structure that would standardise the widths. I had thought it might be something to do with the Flex functionality now in Bootstrap 4, but nothing i've added seems to make an impact on my markup.

Is it something to do with the amount of text I am writing to each element?

<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

This has been an issue with other bootstrap tables in the past. Adding style="width: 33.3333%" seems to do the trick when added to each <th> tag. It will standardize the width of the table columns.

Use this resource to help answer your other questions: How to set up fixed width for <td>?

<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>