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

NRS84 · January 2022

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 · January 2022

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 · January 2022

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

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

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

Answers

Howdy, Stranger!

Categories

DataTables

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

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

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables