Bootstrap4 Changing Header Info To Dark

jntheof

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.

kthorngren

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

jntheof

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!