Why might fixed header columns not line up with table body columns?

NRS84

My fixed table works well, but many of the columns in the fixed header do not have the same width as the table body columns. The overall width of the fixed header lines up with my table fine. It's just some of the columns. It seems to be dividing up the widths of all of the header columns evenly, or at lease in a section evenly. My table header has two rows, with the top row having colspans. The table header columns in question do have a label and div, and I am rotating the text using writing-mode css (writing-mode: vertical-rl;)

I don't have a link to share as this is hosted on a secure, internal server, but I can upload some images. One shows the normal table, and the other is showing the fixed header when the table window is scrolled down. It's applying element.style in the browser, but that don't seem to be getting applied correctly. Just wondering if I am missing something.

NRS84

Here is all of my initialization code:

$.fn.DataTable.ext.pager.numbers_length = 5;
var otable = $("#table_id").dataTable(
            {
                fixedHeader: true,
                sDom: '<"top"fl><"pagination top-pagination"ip><"middle"rt><"pagination bottom-pagination"pi>',
                order: [["2", "asc"]],
                lengthMenu: [[1, 5, 10, 25, 50, 100, -1], [1, 5, 10, 25, 50, 100, "All"]],
                iDisplayLength: 25,
                autoWidth: true,
                stateSave: true,
                columnDefs:
                [
                    {
                        targets: [6],
                        createdCell: function (td, cellData, rowData, row, col) {
                            if (cellData.replace(/(<([^>]+)>)/ig, "") >= 80) {
                                $(td).addClass("green");
                            }
                        }
                    },
                    {
                        targets: [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 19, 20, 21],
                        createdCell: function (td, cellData, rowData, row, col) {
                            if (cellData.replace(/(<([^>]+)>)/ig, "") >= 3) {
                                $(td).addClass("green");
                            }
                        }
                    }
                ],
                language:
                {
                    emptyTable: "There are no students to display.",
                    info: "Showing _START_ to _END_ of _TOTAL_ Students",
                    infoEmpty: "0 leads",
                    infoFiltered: "Filtered from _MAX_ Students",
                    zeroRecords: "No matching students found.",
                    lengthMenu: "Show _MENU_ Students",
                    paginate:
                    {
                        previous: "Prev",
                    },
                },
            });

kthorngren

I don't believe FixedHeader supports complex headers. See this thread. See if it works better without the top header row.

Make sure you have the proper CSS files for the styling framework you are using. Use the Download Builder for this.

Styling issues are difficult to solve without actually seeing the problem page. Can you build a test case that shows the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin