数据表对齐标题和数据列

Question

I have a datatable set up, and I'd like the header and body to align. You can see from the borders I've inserted that they don't, and it's driving me insane trying to track down why not! My CSS isn't great, so probably I'm missing something really obvious. Any help would be greatly appreciated!

CSS:

   <style>


    table.dataTable thead tr th {
        writing-mode: vertical-lr;
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        border-right: 1px solid #dddddd;
    }

    th:first-child {
      border-left: 1px solid #dddddd;
    }

    table.dataTable tbody tr td {
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        border-right: 1px solid #dddddd;
    }

</style>

Datatable JS:

    $(document).ready(function () {
    var table = $('#example').DataTable({
        "ajax": "JS/data/file.txt",
        "columns": [
            {
                "className": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
            },
            { "data": "id" },
            { "data": "total" },
            { "data": "budget" },
            { "data": "schedule" },
            { "data": "features" },
            { "data": "resources" },
            { "data": "sR" },
            { "data": "oR" },
            { "data": "budgetA" },
            { "data": "scheduleA" },
            { "data": "featuresA" },
            { "data": "resourcesA" },
            { "data": "sA" },
            { "data": "orgA" },
            { "data": "budgetG" },
            { "data": "scheduleG" },
            { "data": "featuresG" },
            { "data": "resourcesG" },
            { "data": "sG" },
            { "data": "oG" }
        ],
        "order": [[1, 'asc']], 
        "autoWidth": false, 
        "searching": false,
        "paging": false,
        "info": false, 
        "aaSorting": [[]],
        "bSort": false, 
        scrollX: false,
        scrollY: false, 
        "bAutoWidth": false
    });

I've tried the following CSS without any luck:

Failed CSS

<table id="example" class="display" style="clear:both;table-layout:fixed;">

It got me the closest, but you can see that the first column needs to be a bit wider.

Answer 1

Managed to solve this myself in the end:

th:nth-child(2) {
      border-left: 1px solid #dddddd;
      width: 100px !important; 
    }

Hopefully that helps someone else!