Advanced interaction
features for your tables.

Comprehensive editing
library for DataTables.

Manual

Download

≡ Show site navigation

RowGroup + Bootstrap v5.1.2 and above cause corruption for table-striped

RowGroup + Bootstrap v5.1.2 and above cause corruption for table-striped

tspoh Posts: 2Questions: 0Answers: 0

March 2022 edited March 2022 in Plug-ins

Link to test case: https://github.com/DataTables/DataTablesSrc/files/8214314/test.rowgroup%2Bbootstrap5.1.3.html.zip
Description of problem:

When Bootstrap v5.1.2 and above is used, the even rows are striped. The zip file contain a test html file using the example from https://datatables.net/extensions/rowgroup/examples/styling/bootstrap5.html. Editing the html to use Bootstrap v5.1.1 and below will get good result.

Issue reported at https://github.com/DataTables/DataTablesSrc/issues/200 but was closed, mainly due to me not providing the sample html.

Replies

tspoh Posts: 2Questions: 0Answers: 0

March 2022

I found the fix. In datatables.css the following lines,

table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) {
  --bs-table-accent-bg: transparent;
}
table.dataTable.table-striped > tbody > tr.odd {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
}

has to be updated to,

table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
  --bs-table-accent-bg: transparent;
}
table.dataTable.table-striped > tbody > tr.odd > * {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
}

allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

March 2022

Many thanks! Resolved with your PR

Allan

or Register to comment.