Fixed header not working

Hi,

thanks for your question, and sorry for the trouble.

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Hi Tobias,

The link requested:

https://www.vts.net.my/index.php/ppc/

Hi,

thanks for the link!

The reason for the problem is that you are using “rowspan” in the table. Due to that, the DataTables JavaScript library (which is necessary for FixedHeader) can not work (it’s incompatible with tables that have merged cells).

You will need to remove all #rowspan# and #colspan# from the table and then also re-enable the “Use DataTables” checkbox below the table input fields.

Regards,
Tobias

Hi Tobias,

Thanks to your input, the fixed header is now working. But somehow its not align properly with the rest of the table (it’s columns). I tried modifying the css but to no avail. Do you have any suggestion, before i mark this topic resolved?

Thanks!

Hi,

yeah, this is unfortunately a common problem with FixedHeader ?? I have seen this before, but have never really found a reason or good solution.

Some people have had success with setting the column width for all columns (as explained in the TablePress FAQ), and with the !important keyword added there, as well as with changing the table-layout mode with something like

.tablepress-id-123 {
  table-layout: fixed;
}

Can you maybe try that?

Regards,
Tobias

i’ve added

.tablepress-id-N {
border-collapse: collapse;
}

.tablepress-id-N .row-1 tr {
width: 960px !important;
}

.tablepress-id-N .row-1 .column-1 {
width: 160px !important;
}

and that’s the most successful so far.
Anyway thank you tobias for your help!

Hi,

can you please try something like

.tablepress-id-4 {
  table-layout: fixed;
  width: 960px !important;
}
.tablepress-id-4 td {
  width: 60px !important;
}
.tablepress-id-4 .column-1 {
  width: 160px !important;
}
.tablepress-id-4 .column-2 {
  width: 80px !important;
}

instead?

Regards,
Tobias