wildashfihana wildashfihana - 5 months ago 66
CSS Question

How to center align datatables header

I'm new to datatables. When I make table header, it's always left align.
How can I set the header to center align?
I've read datatables.net/manual/styling/classes and datatables.net/reference/option/columns.className but still don't know how to implement it.

$('.table').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"language": {
"url": "http://cdn.datatables.net/plug-ins/1.10.9/i18n/Indonesian.json"
}
"columnDefs": {
{
className: "dt-head-center"
}
}
});

Answer

You might have forgotten after specifying the class, you need to add the following in CSS:

.dt-head-center {text-align: center;}

Also, if the class has not been added to the <th> of the table, try adding the below CSS for generic stuff:

thead, th {text-align: center;}

/* OR */

.table thead,
.table th {text-align: center;}

To make it specific to a particular table, you can give the table an id="tableID" and then in the CSS, you can do:

#tableID thead,
#tableID th {text-align: center;}