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

istudent_learning

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')
} 

kthorngren

The misalignment is likely due to the documented incompatibility between FixedHeader and Datatables scrolling. Take a look at the Compatibility Matrix and FixedHeader docs for more info.

Kevin

istudent_learning

I think so. I just re create the problem and when i commented these three properties it worked fine.
// scrollY: '70vh',
//scrollCollapse: true,
//fixedHeader: true,

But How do I created fixed header in such scenario with scroll?

colin

Hi @istudent_learning ,

With CSS issues it's hard to understand/diagnose without seeing it.

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

istudent_learning

Appreciate you all guys coming forward and trying to help me. For now, I am going to do pagination which will restrict the height of the table rows not to overflow more than the screen height. I will re create the my situation and post @colin has suggested so that in future I could come and fix the problem.