Datatables not applying BS5 thead-color

mxdv · March 2024

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

allan · March 2024

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

mxdv · March 2024

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:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/2.0.3/css/dataTables.bootstrap5.css" rel="stylesheet">
  </head>
  <body>
    <h1>DataTable Example</h1>
    <h3>Normal Bootstrap-Table</h3>
    <table id="bs-table" class="table w-100">
        <thead class="table-light">
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011-04-25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011-07-25</td>
                <td>$170,750</td>
            </tr>
    </table>
    <h3>DataTable Table</h3>
        <table id="dt-table" class="table w-100">
        <thead class="table-light">
        <!-- table-light will not be applied here
             BS Documentation: https://getbootstrap.com/docs/5.2/content/tables/
             works: <thead class="table-light" style="background-color: var(--bs-table-bg)"> -->
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011-04-25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011-07-25</td>
                <td>$170,750</td>
            </tr>
    </table>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.0.3/js/dataTables.bootstrap5.js"></script>
    <script>
        new DataTable('#dt-table');
    </script>
  </body>
</html>

allan · March 2024

Thank you - this is it running: https://live.datatables.net/zolabuhi/1/edit

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

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

Datatables not applying BS5 thead-color

Datatables not applying BS5 thead-color

Answers

Howdy, Stranger!

Categories

DataTables

Datatables not applying BS5 thead-color

Datatables not applying BS5 thead-color

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables