Fixed Header columns shifting

Resolved kencope
(@kencope)

8 years, 1 month ago

Hi Tobias, I wonder if you can help me?

I’ve purchased the Fixed Header addon (which works great, thank you) but am having problems with the fixed header shrinking in row height and font size so the columns don’t line up.

Is there a way to make the fixed header the same dimensions as the table header? I’ve set columns 2 & 3 to 80 px, and 4 & 5 to 60 px max width on this table.

Thanks for your help,

Kind regards,

Ken

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author Tobias Bäthge
(@tobiasbg)

8 years, 1 month ago
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
Thread Starter kencope
(@kencope)

8 years, 1 month ago
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 8 years, 1 month ago by kencope.
Plugin Author Tobias Bäthge
(@tobiasbg)

8 years, 1 month ago
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
Thread Starter kencope
(@kencope)

8 years, 1 month ago

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

All good now.

Plugin Author Tobias Bäthge
(@tobiasbg)

8 years, 1 month ago

Hi,

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

Best wishes,
Tobias

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Fixed Header columns shifting’ is closed to new replies.

Tags