Width of thead th column does not align with tbody td column

When my table thead column width and tbody column width does not match.

th element is taking the width of header text while tbody columns width are taking the length of data
which has caused table head and body not aligned properly.

My code:

var GetForm = function (token, formType) {

    //$.fn.dataTable.ext.errMode = () => alert('Error Occurred.. please contact admin...');

    var EditFormsDivToUpdate = $('#adminEditOrderFormId');

    EditFormsDivToUpdate.html("");

    var table = '';
    table += '<table id="editFormTable" class="table table-condensed table-bordered table-responsive table-hover xdash-card-table" style="font-size:10px; width:100%">';
    table += '<thead style="font-size:10px; background-color:#495c89; color:#fff">';
    table += '<tr>';
    table += '<td>Id</td>';
    table += '<td>Name/Description</td>';
    table += '<td>SKU</td>';
    table += '</tr>';
    table += '</thead>';
    table += '</table>';

    EditFormsDivToUpdate.html(table);



    var table = $('#editFormTable').DataTable({
        "ajax": {
            url: "/MyWebApp/Admin/OrderForm",
            headers: { "__requestverificationtoken": token },
            type: "POST",
            data: {
                "form": formType
            },
            datatype: "json"
        },
        "columns": [
                { "data": "ID", "name": "ID"},
                { "data": "Description", "name": "Description"},
                { "data": "OrderSKU", "name": "OrderSKU" }


        ], 
        scrollY: '70vh',
        scrollCollapse: true,
        paging: false,
        fixedHeader: "true",
        //autoWidth: false,
       responsive: true
    });


    $('#editFormModel').modal('show')
}