Rowgroup breaks table-striped in bootstrap 5

Rowgroup breaks table-striped in bootstrap 5

FinalbetaFinalbeta Posts: 1Questions: 1Answers: 0

Link to test case: https://live.datatables.net/wenamoti/1/edit?html,css,js,output
Debugger code (debug.datatables.net):
Error messages shown: none
Description of problem: rowGroup breaks table-striped in bootstrap 5. When you select an uneven row, you can't read because it's #fff on #fff
Same as https://datatables.net/forums/discussion/68683/datatables-1-10-25-breaks-table-striped? , but I could not respond there.
This is still ocuring with latest release.

I failed to fix this myself using css overrides, or jquery.
Anyone has a tip on how to fix this?

Thank you.

Answers

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    Hi,

    Thanks for flagging this up. It isn't the same issue as before, or at least not the same root cause, although the end result might look the same.

    I made a mistake in the DataTables / Bootstrap 5 integration CSS with the use of .odd and .even for the selectors, rather than using Bootstrap 5's :nth-of-type(2n+1). The result was that I had conflicting styles if there was an extra row inserted into the table, like with RowGroup.

    I've committed the fix and the nightly will contain the fix in the DataTables / Bootstrap 5 CSS integration soon!

    Regards,
    Allan

Sign In or Register to comment.