Bootstrap5 table colors

jtoler5

There appears to be an issue where if you set the table header to a dark background color (text white). When you turn it into a Datatable because of the transparent background color being set on the table header, it causes the table header to not follow the bootstrap classes/colors.

https://jsfiddle.net/pevftkca/1/

Comment out the JS to see what it originally looks like. Just threw this fiddle together to show.

allan

Yes, I'm afraid this is a known issue. DataTables does not currently support the table variants from Bootstrap. See this issue. I will look into this.

Allan

jtoler5

Ahh, ok. Is there any temp fix I could do on my end without editing source files? I thought if I included the DataTables css before including bootstrap, that would fix. I swear it worked the other day when I did that but not anymore.

allan

Yes, do:

table.table.dataTable > :not(caption) > * > * {
  background-color: var(--bs-table-bg);
}

https://jsfiddle.net/5m7kx42g/

Allan

allan

I've committed that fix.

Allan