table-striped on bootstrap doesn't work

[GermanZun]

Hi. table-striped doesn't work for me on bootstrap. Even on the demo sample doesn't work and i can see that table-striped class is aplied to the table. How can i enable it? Thanks!

https://tables.laravel-boilerplate.com/bootstrap-5

[rappasoft]

You're right, I'm not sure why it's not applying I'll have to look into it.

[GermanZun]

I think its because the hidden rows. Bootstrap applies striped based on odd even, including hidden rows. If i delete the hidden rows (or add a new hidden for each hidden row) it works.

[rappasoft]

Ill be honest i'm not sure how to fix this one because of the hidden rows.

[Dave2084]

I fixed this by adding a class to the table where it would have the hidden rows and then added some sass to override the bootstrap 5 css when that class was present:

In config I added:

->setTableAttributes([
    'class' => 'table-striped-collapse',
])

The sass:

.table-striped {
    &.table-striped-collapse {
        > tbody > {
            tr {
                &:nth-of-type(odd) > * {
                    --bs-table-accent-bg: inherit;
                    color: inherit;
                }

                &:nth-of-type(4n-3),
                &:nth-of-type(4n-2) {
                    > * {
                        --bs-table-accent-bg: var(--bs-table-striped-bg);
                        color: var(--bs-table-striped-color);
                    }
                }
            }
        }
    }
}

[Dave2084]

Also, if you are using the table-hover class you'll need the following sass:

.table {
    &.table-striped {
        &.table-striped-collapse {
            > tbody > tr {
                &:nth-of-type(odd) > * {
                    --bs-table-accent-bg: inherit;
                    color: inherit;
                }

                &:nth-of-type(4n-3),
                &:nth-of-type(4n-2) {
                    > * {
                        --bs-table-accent-bg: var(--bs-table-striped-bg);
                        color: var(--bs-table-striped-color);
                    }
                }
            }

            &.table-hover {
                > tbody > tr:hover > * {
                    --bs-table-accent-bg: var(--bs-table-hover-bg);
                    color: var(--bs-table-hover-color);
                
                }
            }
        }
    }
}