Vertical Scroll Header not aligned

dfaunce

I've setup my table similar to this: https://datatables.net/examples/basic_init/scroll_y.html

The feature works, but the column headers are not aligned with the body of the data.

I've attached a screen shot of what it looks like.

What am I doing wrong??

My jQuery:

 $(".datatable").DataTable({
                "scrollY": "400px",
                "scrollX": true,
                "scrollCollapse": true,
                "paging": false,
                buttons: {
                    buttons: [
                        {
                            extend: 'excelHtml5',
                            className: 'btn btn-light-green',
                            //title: 'Control Relays',
                            text: '<i class="icon-file-spreadsheet position-left"></i> Excel',
                            exportOptions: {
                                columns: ":not(.no-export)"
                            }
                        },
                        {
                            extend: 'pdfHtml5',
                            className: 'btn btn-light-red',
                            text: '<i class="icon-file-pdf position-left"></i> PDF',
                            orientation: 'landscape',
                            exportOptions: {
                                columns: ":not(.no-export)"
                            }
                        },
                        {
                            extend: 'colvis',
                            text: '<i class="icon-three-bars"></i> <span class="caret"></span>',
                            className: 'btn btn-charcoal btn-icon'
                        }
                    ]
                }
            });

dfaunce

Image

kthorngren

Do you have width="100%" set on your table?

Kevin

dfaunce

I hadn't, it was set to 1500px, but I just set it to 100% and it still shows up misaligned.

kthorngren

Looks like you are using jqueryui possibly?

I wonder if there is a CSS conflict causing the problem. Can you build a test case showing the issue?

Kevin

dfaunce

I think you are right. I am using a pre-made HTML template and it seems like the author combined his bootstrap css with other libraries to form one giant hybrid css file. Let me see if I can create this case with his hybrid file.

delta

Add flow style

.dataTables_scrollHeadInner {
width: 100% !important;
}
.dataTables_scrollHeadInner table {
width: 100% !important;
}