Header and Data Alignment

synaqvi

Hi

I am new to DataTables. Can anyone please let me know how can I align (say left) the header and data in a Datatable? Currently, it is not (left) aligned (reference screenshot attached).

kthorngren

You can apply the Datatables dt-header-left class as shown in the Styling docs.

Kevin

synaqvi

Thanks @kthorngren for your prompt response.

I have used the following code as per the Styling Docs example you shared but still, the header has 1-2 spaces on the left as shown earlier in my screenshot.

columnDefs: [{
                    targets: 0,
                    className: 'dt-left'
                }]

Please help.
Thanks.

kthorngren

Right click on the header and inspect one of the th elements. Look for the padding CSS. It will look something like this:

table.dataTable thead th, table.dataTable thead td {
    padding: 10px 18px;
    border-bottom: 1px solid #111;
}

Override the CSS you find and set the padding the way you want. See this w3schools example for more info about setting the padding. If you want it aligned with the table cells then inspect one of the cells to see the left padding value it sets.

Kevin