Aligning header with data

simonshepherd34

I'm struggling to align the header with the data when I align left. It's fine if I align center. If I align left, the header is approx 0.5cm further to the right of the data. I've attached a picture of what it looks like:

Here is my javascript:

$('#results').DataTable({
    destroy: true,
    data: final,
    paging: false,
    info: false,
    bFilter: false,
    aaSorting: [],
    bSortClasses: false,
    columns: [
        { "data": "league" },
        { "data": "home_team" },
        { "data": "away_team" }
    ],
    columnDefs: [
        { "title": "League", className: "left", "targets": [0] },
        { "title": "Home Team", className: "left", "targets": [1] },
        { "title": "Away Team", className: "left", "targets": [2] }
    ]
});

Here is my CSS:

.left {
    text-align: left;
}

.center {
    text-align: center;
}

simonshepherd34

Sorry to waste anyone's time. I've found a solution. I just put the following in my html. class="display compact"

<table id="results" class="display compact">
           
</table>