How to control/change child DataTable header background-color?
How to control/change child DataTable header background-color?
gh2m
Posts: 63Questions: 16Answers: 0
I have a nested DataTable and would like to change the background-color of the child table header, i.e., columnx header:
$('#childtable').DataTable({
dom: "t",
data: <filename/array>,
columns: [
{ data: "col1", title: 'column1 header' },
{ data: "col2", title: 'column2 header' }
]
});
This discussion has been closed.
Answers
That was a bit of a puzzle to figure out. Looks like for the default Datatables styling you can use something like this for the Child DT -tag thead`:
But that alone doesn't work. I had to override this Datatables CSS:
I updated one of my examples to show this:
http://live.datatables.net/cuviboru/1/edit
This may or may not work in your environment or if you are using a styling framework like Bootstrap. If it doesn't work then use the browser's inspector tool to see what needs changed or post a link to your page or test case so we can help debug.
Kevin
It doesn't work for me. I am wondering if I can do inline style background-color change under table initiation:
$('#childtable').DataTable({
thead: "style: background-color:blue" ??? or something like that
......
Datatables doesn't have a
theadoption. Since the child Datatable is in atrfrom the parent Datatable you may need to adjust settings there. Like I did in my example. Like I said you will either need to use the browser's inspector tool to figure out what to change or provide a link to your page or a test case replicating your environment so we can take a look.Kevin
Thanks. Because I have multiple dynamic child tables (childtable1, childtable2, etc.) I was able to style it with following
[id^='childtable'] thead tr th {
background-color: #566d8c;
}