table header width not aligned with body width

hellodjl

I am using datatables jquery, When running the application, the header width is not aligned with the body width.But when I click on the header, it is getting aligned with the body width but even then there is some light misalignment.

kthorngren

Try adding width="100%" to your table in HTML. If the table is hidden you may need to use columns.adjust() to recalc the column width after the table becomes visible.

If these don't help please provide info about your environment and Datatables config.

Kevin

ruthc

Thanks Kevin, columns.adjust() makes the job

tnthieu

Hi

I have the same problem (header text is not align with table body) but the columns.adjust does not help

dataTable = $('#jobs-table').dataTable({
            ajax: {
                type: "GET",
                url: ProjectProperties.ajaxUrlPrefix + "/JeopardyService.svc/GetJobsGrid",
                processData: true,
                contentType: "application/json; charset=utf-8",                
                dataType: "json",
                dataSrc: function (json) {
                    var data = JSON.parse(json.d);
                    return data;
                }
            },
            dom: 'T<"clear">lBfrtip',           
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            processing: true,
            language: {
                processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>'
            },
            lengthChange: false,
            pageLength: 10,
            deferRender: true,
            scrollY: (screen.height - 435) + 'px',
            scrollX: true,         
            order: [[2, 'desc'], [3, 'asc']],
            columnDefs: [{ targets: 0, orderable: false },
            { targets: 0, width: '10px' },
            { targets: 0, className: 'dt-body-center' },
            { targets: 1, className: 'dt-body-center' }
            ],..............................

And the table is setup by

"<table id="jobs-table" class="table table-hover table-condensed jobs-table" style="width: 100%"> 
                <thead>
                    <tr>
                        <th class="small-column"></th>
                        <th>Color></th>
                        <th class="priority-column">Priority></th>
                        <th>JobID"></th>
                        <th class="last-editor-column">LastEditor></th>
                        <th>NumberOfEdits></th>
                        <th class="last-remark-column">LastRemark</th>
                        <th></th>
                        <th>Circuit</th>
                        <th>JobType</th>
                        <th>ReceivedDate</th>
                        <th>DueTime</th>
                        <th>Interval</th>
                        <th class="jeopardy-type-column">JeopardyType</th>
                        <th>RemainingTime</th>
                        <th>Status</th>
                        <th>DispatchArea</th>
                        <th class="region-column">Region</th>
                        <th>VendorName</th>
                        <th>TechID</th>
                    </tr>
                </thead>
            </table>"

Please help. Thank you

kthorngren

@tnthieu the problem is specific to your environment and config. In order to help we will need to see a link to your page or a test case replicating the issue. You code snippet above doesn't not have enough information to help.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

tnthieu

hi @kthonrngren,

sorry I cannot duplicate all the datatable. But I tried to put most of all the configuration

http://live.datatables.net/vazugavu/1/edit

Please have a look

Thank you

kthorngren

You are getting syntax errors which causes the Datatable to not load. We actually need to see the problem in order to help. Likely the problem is a CSS issue.

sorry I cannot duplicate all the datatable.

Its not expected to duplicate all the Datatable. What we want is to have enough of the environment duplicated so we can see the problem. Since you are using Ajax data you can take a sample of the data, place it into a Javascript variable then use data to provide the data to Datatables. You can remove the Ajax option. See this example:
https://datatables.net/examples/data_sources/js_array.html

Kevin