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

Bootstrap4 Changing Header Info To Dark

Bootstrap4 Changing Header Info To Dark

jntheofjntheof Posts: 2Questions: 1Answers: 0
in Free community support

I've looked around for this and no solution jumped out at me.

I'm using BS4 and would like to setup my tables so that the table is light but the header is dark (https://getbootstrap.com/docs/4.0/content/tables/#table-head-options).

My html looks like this:

table id="table_div" class="table table-display table-hover table-striped table-bordered table-sm table-light" style="width:100%"></table>

but it's not clear how/where I would update the information to make the Headers dark.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,298Questions: 26Answers: 4,769
    edited April 2020 Answer ✓

    I wonder if its a bug in the Bootstrap CSS. See this example:
    http://live.datatables.net/yifijama/1/edit

    I copied the .thead-dark CSS from twitter-bootstrap/4.1.1/css/bootstrap.css, which is the version included when using the Download Builder, into the CSS tab:

    .table .thead-dark th {
  color: #fff;
  background-color: #212529;
  border-color: #32383e;
}

    If you remove .table then the CSS works. Note this is all without Datatables. I think there are later versions of BS 4. Not sure which one you are using.

    Kevin

  • jntheofjntheof Posts: 2Questions: 1Answers: 0

    Kevin

    thanks for the quick feedback; I'm using version 4.3.1 which has the same issue - but you have provided a possible workaround and I appreciate that!

This discussion has been closed.

DataTables

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