Bootstrap 5 flex tables with striping and vertical text centering creates height problem (td element-CodePudding

I am making a bootstrap table <table > with columns and rows like this:

            <tr class="d-flex">
                <td class="col">Voornaam</td>
                <td class="col">Sean</td>
            </tr>

But if I want to align-items: center or align-self:center, it looks like this: centered td element with partial background

Now I think the problem lies in the way bootstrap applies the table-striped class, since the selector is .table > :not(caption) > * > * { with box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); in combination with the selector .table-striped > tbody > tr:nth-of-type(odd) { and --bs-table-accent-bg: var(--bs-table-striped-bg);. I use background-color: rgb(190, 225, 130) !important; on .table class in my own css, but it doesn't seem to cause the issue (since I tested without that)

I have searched quite well and can't seem to find a way to make sure the td fills the full height of the tr in flexbox, which would let the background apply smoothly. It is my first time working with bootstrap so I hope I am clear enough. Thanks in advance for any tips and solutions!

CodePudding user response：

The d-flex is overwriting the default <tr> display type.

If you want the <td>s vertically aligned you can do:

<table class="table table-striped table-hover table-bordered text-break border-light text-center my-4">
    <tr>
        <td class="align-middle">Voornaam</td>
        <td class="align-middle">Sean</td>
    </tr>
</table>

References: