Header and Data Alignment

Header and Data Alignment

synaqvisynaqvi Posts: 11Questions: 4Answers: 0

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).

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

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

    Kevin

  • synaqvisynaqvi Posts: 11Questions: 4Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736
    edited July 2021 Answer ✓

    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

Sign In or Register to comment.