DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Bootstrap5 table colors

Bootstrap5 table colors

jtoler5jtoler5 Posts: 88Questions: 32Answers: 3
in DataTables

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.

This question has an accepted answers - jump to answer

Answers

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

    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

  • jtoler5jtoler5 Posts: 88Questions: 32Answers: 3

    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.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Answer ✓

    Yes, do:

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

    https://jsfiddle.net/5m7kx42g/

    Allan

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

    I've committed that fix.

    Allan

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.