Fixed Header columns shifting

Hi,

thanks for your question, and sorry for the trouble.

At first, let’s try to set the font size the same:

.tablepress thead th {
  font-size: 1.286rem;
}

Then, we could experiment with the way how the browser determines column widths:

.tablepress.fixedHeader-floating {
  table-layout: auto;
}

If that does not yet help, can you please try setting the column widths for the columns using the !important flag, like

width: 60px !important;

?

Regards,
Tobias

Hi Tobias,

Thank you very much. The first suggestion works great regarding font size. The !important flag also works to some extent – it doesn’t seem to take into account the sorting button to the right of the column title, which I’ve not been able to nail down. I can live with this if it is not easy to fix.

However, the other thing is that the Fixed Header is only responsive to a certain extent, once it goes below 768px for this table it remains fixed, unlike the table which has a responsive command throughout the responsive addon. Is there a way to make this fixed header responsive too? If not is there a way to hide it below 768px?

Thanks in advance,

Kind regards,

Ken

• This reply was modified 6 years, 8 months ago by kencope.

Hi,

one more try:
Can you change my suggested

.tablepress.fixedHeader-floating {
  table-layout: auto;
}

to

.tablepress.fixedHeader-floating {
  table-layout: auto !important;
}

?

Regarding hiding on small screens: For that, please use

@media (max-width:756px) {
  .tablepress.fixedHeader-floating {
    display: none !important;
  }    
}

Regards,
Tobias

Thank you very much, Tobias, you provide the best support!

All good now.

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias