Hi,
thanks for your question, and sorry for the trouble.
The reason for this is some CSS that you have in your theme’s Custom CSS:
#tablepress-10_wrapper {
max-height: 400px;
overflow: scroll;
}
If you remove that, the header should be fixed to the top of the page.
Regards,
Tobias
Hi Tobias,
But in my case the table is too long, this is why i decided to fix the height in 400px.
Hi,
I understand, but I’m afraid that that’s not what FixedHeader can offer here 🙁
You might instead want to use a different solution:
Please turn off FixedHeader again for this table and also remove the CSS.
Then, add this parameter to the Shortcode:
[table id=123 datatables_scrolly=400px /]
Regards,
Tobias
Hi Tobias,
This works for that test table thanks. But now i want to add this here
http://ap.nowcommu.myhostpoint.ch/
Please, scroll to the second section (Wohnungen) and then click on Weiter, you can see the table. How come now the header don’t fit the the content but looks like smaller?
Hi,
this is probably caused by the table and other content being loaded in that overlay modal. Due to that, the table does not have a width initially (when the page is loaded). Therefore, the JS library can not make calculations with the width, which are necessary.
My suggestion here would be to manually set the column widths of this table’s columns using the CSS from tablepress.org/faq/column-widths/
Regards,
Tobias
I made something like this but ooks like this not fix the issue:
.tablepress-id-9 .column-4 {
width: 120px;
}
.tablepress-id-9 .column-5 {
width: 60px;
}
.tablepress-id-9 .column-6 {
width: 120px;
}
.tablepress-id-9 .column-7 {
width: 120px;
}
.tablepress-id-9 .column-8 {
width: 120px;
}
.tablepress-id-9 .column-10 {
width: 120px;
}
.tablepress-id-9 .row-1.odd .column-4 {
width: 120px !important;
}
.tablepress-id-9 .row-1.odd .column-5 {
width: 60px !important;
}
.tablepress-id-9 .row-1.odd .column-6 {
width: 120px !important;
}
.tablepress-id-9 .row-1.odd .column-7 {
width: 120px !important;
}
.tablepress-id-9 .row-1.odd .column-8 {
width: 120px !important;
}
Hi,
please try with selectors and CSS like
.tablepress-id-9 .column-1 {
width: 120px !important;
}
Regards,
Tobias
Hi Tobias,
please try with selectors and CSS like
.tablepress-id-9 .column-1 {
width: 120px !important;
}
if i use this i also have to leave the datatables_scrolly=400px attribute?
Hi,
yes, that attribute is what creates the fixed header for the scrolling table, just like above.
Regards,
Tobias
Hi Tobias,
Thanks again for the help. I tried but on mobile is not responsive anymore.
I also tried via JS like this but does not works
<script>
document.getElementById("tablepress-9").addEventListener("scroll", function() {
var translate = "translate(0," + this.scrollTop + "px)";
this.querySelector("thead").style.transform = translate;
});
</script>
Hi,
yeah, on mobile, the fixed widths will probably cause trouble 🙁
Maybe you could set them to other values using CSS3 Media Queries?
Unfortunately, I’m out of other ideas for this special setup with the overlays here 🙁
Regards,
Tobias
