Center Table Header

hdoran

I'm working through the example found on this page:

https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

I have it applied in the context of my application but the header row (the first one), is right justified.

Can someone suggest how this .js can be modified so the header row (column names) are centered?

Thank you

$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example thead tr').clone(true).appendTo( '#example thead' );
$('#example thead tr:eq(1) th').each( function (i) {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );

    $( 'input', this ).on( 'keyup change', function () {
        if ( table.column(i).search() !== this.value ) {
            table
                .column(i)
                .search( this.value )
                .draw();
        }
    } );
} );

var table = $('#example').DataTable( {
    orderCellsTop: true,
    fixedHeader: true
} );

} );

kthorngren

I inspected the example you linked and found the below CSS that left justifies the header text:

I unchecked it and now the text is centered. You should do the same - right click on a header cell and find the CSS setting you either need to change or override. If you need help please post a link to your page or a test case replicating the header styling you want to fix.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin