Tablepress: Make a 'versus' Comparison Table (with sticky header!)

[@dvlprsakib9970]

Very Help full and informative video..

[@tmondol1]

Great video...like to ask how can I make the first column sticky?

[@weiss-shaw]

I set the parameters exactly as in the video above, but the form doesn't respond at all. I don't know what's going on.

[@BuildThatWebsite]

If the CSS is written correctly then the next step is to confirm it's actually being loaded on the page.

[@luisbassols8900]

Awesome video but sticky doesn´t work for me either. It is necessary to install the Extension DataTables FixedHeader..? Thank you!

[@BuildThatWebsite]

It seems like it may not work with the Datatables library active. Also, chrome and edge can't stick the thead element, you have to target the elements instead.

[@Dispatern]

@@BuildThatWebsite Very helpful video and code! Thank you very much.
The sticky header code works for my table press tables in the Opera browser but not in Chrome. :(

[@BuildThatWebsite]

@@Dispatern Which element did you stick with CSS? Position sticky works with TH elements but not Thead or TR elements in chrome.

[@Dispatern]

@@BuildThatWebsite Hello! Thank you for the reply. I indeed used it on tr. In the code it's tr.row-1. In my tables the first row works as my table header but I'll try to change that now. Thank you for the tip and have a great weekend! :)

[@aidanpilet]

Very helpful, thank you.

[@techbestreview3989]

Many thanks #love#

[@Nilslab]

sticky not work, by the way the video is awesome
.tablepress.compare tr.row-2 {
position: sticky;
top:0;
box-shadow: inset 0 -1px #ddd;
}

[@BuildThatWebsite]

Hmm, I wonder if it's a browser support issue. Which browser are you using?
One thing that can break sticky table rows is the overflow property. Trying setting the element to overflow: auto; and see if that fixes it.