Fixed header column widths do not match (align with) the table column widths until a sort is done.

Glyndwr

Hi,

I know this question has been asked on many occasions; however, I just can not get it to work.

My js is:

        var attendanceDetailsTable = $('#attendanceDetailsTable').DataTable( {
            info:           false,
            fixedHeader:    true,
            scrollY:        "500px",
            scrollX:        "100%",
            scrollCollapse: true,
            paging:         false,
            pageLength:     30,
            dom:            'Bfrtip',
            buttons:        ['copy', 'csv', 'excel', 'pdf', 'print'],
            data:           responseJson1a,
            columns:        varColumns,
        } );
        $('.dataTable').wrap('');
        $('.dataTables_scrollHeadInner').css({"width":"100%"});
        $('.table').css({"width":"100%"});

My CSS is:

    table.dataTable,
    table.dataTable th,
    table.dataTable td {
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
    }

    table.dataTable thead tr {
      background-color: white;
    }

My HTML is:

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                        <!-- table data will be placed in here -->
                        <table class="table table-hover table-striped table-bordered" id="attendanceDetailsTable">                              
                        </table>

                        <div style="text-align: center;">
                            <span id="ajaxGetUserServletResponse" style="color: red;"></span>
                        </div>
                    </div>

You can see that this incorporates all the suggestions from previous questions.

Kind regards,

Glyn

kthorngren

The problem is likely due to the documented incompatibility of FixedHeader and the scrolling features. Noted here:

Please note that FixedHeader is not currently compatible with tables that have the scrolling features of DataTables enabled (scrollX / scrollY). Please refer to the compatibility table for full compatibility details.

The same is noted in the Compatibility Matrix.

Kevin

Glyndwr

Hi,

Found the solution when trying to fix another. Add:

attendanceDetailsTable.columns.adjust().draw();

after:

$('.table').css({"width":"100%"});