Datatables not applying BS5 thead-color
Datatables not applying BS5 thead-color
Debugger code (debug.datatables.net): enoqon
Description of problem:
Hello everyone,
I am using Bootstrap 5.3.2 in combination with the latest Datatables.net version within my Django application.
The following CSS stylesheets are included:
* datatables.net-bs5/css/dataTables.bootstrap5.min.css
* datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css
and the following JavaScript:
* libs/datatables.net/js/dataTables.min.js
* libs/datatables.net-bs5/js/dataTables.bootstrap5.min.js
* libs/datatables.net-responsive/js/dataTables.responsive.min.js
* libs/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js
My HTML code is as follows:
<table id="users-table" class="table dt-responsive nowrap w-100 table-hover">
<thead class="table-light">
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">E-Mail</th>
</tr>
</thead>
</table>
My problem now is that the thead class "table-light" will not be applied to DataTables. The header always remains completely white (or dark if dark-mode is enabled).
The following attribute is not adopted from Bootstrap:
.table-light {
--bs-table-bg: #eff2f7;
}
Current workaround for me is the following:
<thead class="table-light" style="background-color: var(--bs-table-bg);"></thead>
In previous versions of DataTables (i guess BS4) the header used the appropriate color, currently this doesn't seem to work anymore.
Or am I doing something wrong here?
This may refer to this post:
https://datatables.net/forums/discussion/75480/bootstrap-dark-theme-eg-bg-dark-or-bg-black
Its not quite the same issue, but the same fix could work here
Debugger code see above.
Thank you very much!
Max
Answers
Hi Max,
Thanks for reporting this. I'm afraid that BS5 table varients aren't yet supported.
Are you trying to use a light coloured table on a dark page? If you are able to link to a test case, that would help me understand what is going on.
Allan
Hi Allan,
thanks for the reply!
If the BS5 table variants are not yet supported, that explains a lot.
I basically try to set the color of the thead of a DataTable on a normal page (no matter if light/dark colored).
Here's a full example including a comment of what I'm trying to do. Just create an HTML file and open it in your browser:
Thank you - this is it running: https://live.datatables.net/zolabuhi/1/edit
Is the line in my Bootstrap 5 / DataTables integration that is causing the issue. I'll need to look into why I added that - I can't immediately recall off the top off my head!
Allan