How can I avoid different cell width between the header and the body?

jstuardo

Hello, I always have the following problem when using DataTables:

See that the header columns does not match the body columns.

I realized that this problem occurs because when rendering, there are actually 2 tables. One for the header and the other for the body. For a strange reason, sometimes the widths of the cells does not match between both tables. I always waste a lot of time trying to solve this (since I started using datatables several years ago). I think the solution could be not to have 2 tables. Is there a way to avoid that? since I think in this forum datatable developers participate, I am wondering why is the reason and how I can deal with it.

My datatable definition is:

tabla = $('#empresas').DataTable({
            .....
            columns: [
                {
                    data: function (row, type, val, meta) {
                        return '<a id="_editar" href="javascript:void(0)" title="Editar empresa" onclick="return editar(' + row.id + ');"><i class="ti-pencil me-3"></i></a><a id="_eliminar" href="javascript:void(0)" title="Eliminar empresa" onclick="return eliminar([' + row.id + ']);"><i class="ti-trash"></i></a>';
                    },
                    className: "text-center",
                    orderable: false,
                    width: 50
                },
                { data: "id", width: 70, orderable: false },
                { data: "cliente", width: 90 },
                { data: "nombre",  width: 120 },
                { data: "razonSocial", width: 150 },
                { data: "identificacion", width: 100 },
                { data: "codigo", width: 90 },
                { data: "ciudad", width: 110 },
                { data: "numeroMonitores", width: 110, render: $.fn.dataTable.render.number( '.', ',', 0, '' ) },
                { data: "numeroUsuarios", width: 110, render: $.fn.dataTable.render.number( '.', ',', 0, '' ) },
                { data: "numeroTrabajadores", width: 110, render: $.fn.dataTable.render.number( '.', ',', 0, '' ) },
                { data: "creacion", width: 110 },
                { data: "actualizacion", width: 110 }
            ],
            processing: true,
            serverSide: true,
            colReorder: false,
            orderMulti: false,
            responsive: false,
            autoWidth: true,
            order: [2, "asc"],
            rowId: 'id',
            scrollX: true,
            search: { search: $(jQuery).simpleSearch() ? $(jQuery).simpleSearch() : $(jQuery).advancedSearch() },
            columnDefs: [
                {
                    targets: 1,
                    render: function (data, type, row, meta) {
                        return '<label class="custom-control custom-checkbox"><input id="chk_' + row.id + '" type="checkbox" class="custom-control-input" /><span class="custom-control-label">' + data + '</span></label>';
                    }
                },
                {
                    targets: [11, 12],
                    render: $.fn.dataTable.render.moment('', 'DD/MM/YYYY HH:mm:ss')
                }
            ],
            createdRow: function( row, data, dataIndex ) {
                if ( !data.vigente ) {
                    $(row).addClass( 'text-danger' );
                }
            }
        });

And the corresponding HTML is:

<table id="empresas" class="table table-bordered table-hover text-nowrap display w-100">
            <thead>
                <tr>
                    <th class="text-center"></th>
                    <th><label class="custom-control custom-checkbox"><input id="chk_0" type="checkbox" class="custom-control-input" /><span class="custom-control-label">ID</span><i class="fa fa-question-circle text-info" style="margin-left: 10px" data-bs-container="body" title="Selección Múltiple" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" data-bs-html="true" data-bs-content="Seleccione todos los registros en la página actual."></i></label></th>
                    <th class="text-center">Cliente</th>
                    <th class="text-center">Nombre</th>
                    <th class="text-center">Razón Social</th>
                    <th class="text-center">Identificación</th>
                    <th class="text-center">Código</th>
                    <th class="text-center">Comuna</th>
                    <th class="text-center">N° Monitores</th>
                    <th class="text-center">N° Usuarios</th>
                    <th class="text-center">N° Trabajadores</th>
                    <th class="text-center">Registro</th>
                    <th class="text-center">Actualización</th>
                </tr>
            </thead>
        </table>

When I set scrollX to false, cell widths match, but horizontal scrolling disappear.

Regards
Jaime

colin

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