Issue: I have a large table, and I have the formatting basically where I want it and I like the look now, but I need the header row to stay in view even when scrolling down… I found a code that almost does the trick (.tablepress thead {table-layout: above; position: fixed;) however when I use this two unintended things happen:

#1 – it doesn’t keep the column widths the same as the main table it seems to scale them to match the cell content of only the header row so nothing lines up

#2 – it stays fixed where the table originally loads… ie. because my table loads half way down the page, the header row stays stuck there at the bottom of the page and the table just scrolls behind it…

what I really need is for the header row to #1 be the correct width to match the rest of the table, and #2 I need the header to scroll up along with the table until it reaches the top of the page and then hold there while you continue scrolling so that the header is always in view, but you can see the maximum amount of the spreadsheet too and it’s not only at the base of the page where it loads :)…

It looks like you have an extension that should work @ https://tablepress.org/extensions/datatables-fixedheader/ according to other posts… however for some reason I can’t load that page… I can get to tablepress.org, but not any of it’s other pages… it keeps throwing an error “Unable to connect”… is that on my end? I have had issues connecting to .org websites in the past, but because it allows me to get to the main site I can’t figure out what the issue is…

Any help you can give me on this would be extremely appreciated! I am new to wordpress and coding, but I am learning fast and doing my best!
Thanks so much!
~Kristin

we would like to use both plugins together to fix the first column and fix the title row. But if we combine both shortcodes only the title row is fixed but NOT the first column:

[table id=2 datatables_fixedcolumns_left_columns=1 datatables_fixedcolumns_right_columns=0 datatables_fixedheader=top datatables_fixedheader_offsettop=150 /]

A different order of the shortcodes inside the brackets didn’t change anything.

Is it possible to combine both plugins at all?

Cheers, Felix

https://datatables.net/examples/basic_init/scroll_y_dynamic.html

I tried many variation in the shortcode but was unable to get it, it should have fixed header and vertical scroll eventually showing all the data in the sheet without pagination…

thanks for the great plugin

I apologize for my English… but thanks for your great plugin !

I have been using the FixedHeader DataTables plugin for a few years. Now I have to reorganize the presentation of my data.

To do this, I have to insert my tables in “toggles” (provided by my theme “3 clicks”). But then there’s a problem: the fixedheader plugin does not seem to work anymore within these toggles (the shortcode looks like this “[tableau id=8 hide_columns=”3,4″ column_widths=”60px|80px|150px|40px|40px|40px|40px|” datatables_fixedheader=top datatables_fixedheader_offsettop=150 /]”). But header is not fixed at all…

Do you know if it’s possible to do so ?

Unfortunately, this page is still in dev, so it’s not easy for me to show you in “real condition”.

Thanks for your help !

Adrien

first of all I want to thank you so much for creating such a great plugin! I use it on a feature-comparison page: mb.ac/cube-vergleich

Today I have customized the table by adding the following Custom CSS:

.tablepress tbody td {
	font-size: 14px;
	color: #333;
}
.tablepress thead th {
	font-size: 16px;
	color: #333;
}
.tablepress .column-1 {
	width: 30%;
	border: 1px solid grey;
}
.tablepress .column-2 {
	width: 35%;
	border: 1px solid grey;
}
.tablepress .column-3 {
	width: 35%;
	border: 1px solid grey;
}

and the result is as expected. The only problem I have is applying this extention correctly: DataTables FixedHeader

I have deployed the table by using this shortcode:
[table id=4 datatables_fixedheader=top /]

Inside the table the first row is activated as table-header.

Now when I scroll down the page I would expect the header-row to stick on top of the browser-window, but it does not stick.

I would be more than happy if anyone could help me with troubleshooting and solving this issue.

Have a wonderful day!
Sascha

I’ve noticed when the table is wider than the natural display, the fixed header scrolls at a different rate than the rest of the table; rendering mislabeled columns.

Consider the following page on a (simulated) mobile device:
https://battlecalculator.com/pokemon-go/pokemon-go-max-cp-hp/

I would like the heading to shrink into a smaller version of the existing header and remain fixed at the top of all pages

Anyone have an idea of what coding I would need for this?

Thanks

We have installed and activated the extension for FixedHeader on our website, and set an offset of 140 (based on the fixed header already in our website’s theme).

Unfortunately, even after clearing cache, the header is not fixed for our test table. This is the code we are currently using:

[table id=1458 datatables_fixedheader=top datatables_fixedheader_offsettop=140 /]

This is the test webpage for your reference.

https://www.healyconsultants.com/testing-contact-box/

Can you please advise on how to fix this issue? We would like to use this on our landing pages, e.g. the Indonesia page below:

https://www.healyconsultants.com/indonesia-company-registration/

Thank you.

https://www.ads-software.com/plugins/tablepress/

We are working on implementing the fixed header to our table and I believe there is a conflict. I have read many support posts and none have worked. So far we have installed the plugin, made sure the use data tables box was checked, placed the shortcode on the page, and I have even tried some custom css.
.tablepress.fixedHeader-floating,
.tablepress.fixedHeader-locked {
z-index: 0;
}

Can you please advise a place I can send you a website link so you can possibly take a look?

https://www.ads-software.com/plugins/tablepress/