Why didn't position:sticky work?

[eaglehopes]

In my website I am trying to use position:stick for a table row (<tr> element). But it did not work, I read possible causes but none of them is valid for me. 

My website is my web page and problematic table row is 

 

<tr class="StickyMenuBar" id="MainMenuBar">
          <!--  MENU ROW -->
    
        <td class="MenuTag" id="menuBar">

...

and corresponding css code is :

.StickyMenuBar {
 position: -webkit-sticky;
 position : sticky;
 top : 0px;
}

Thanks.

Edited September 5, 2022 by eaglehopes
add tags

[eaglehopes]

The link seems broken, I think I forgot to add it, it is here, sorry.

[kicken]

Seems like it's working fine for me.  However, you should not be using tables for layout.

[eaglehopes]

I am using Chrome 90.0.4430.212 and not working for me. But, after your reply, I used Firefox 98 and it worked ! Its behavior is browser dependent then. 

Also I read the link you have sent, it contains lots of valuable info for me. I will try to change my design. Thanks kicken.

 

[kicken]

2 hours ago, eaglehopes said:

Its behavior is browser dependent then.

This can be a frequent issue, which is why it's important to test on multiple browser.  You can also reference caniuse.com to get an idea of what is supported on which browser versions.  If you look up position: sticky there for example, it says for chrome (up to 90, which is your version) it's partially supported with the note:

Quote

Supported on th elements, but not thead or tr

Modern chrome fully supports it.

Edited September 5, 2022 by kicken

[eaglehopes]

15 hours ago, kicken said:

You can also reference caniuse.com to get an idea of what is supported on which browser versions. 

@kicken, the caniuse.com is a fantastic website ! I saved it to my bookmarks immediately! I couldn't imagine of the presence of such a great & supporting website until one mention about it.

 

[eaglehopes]

I changed all my website and make sticky menu work even for Chrome by freeing the design from table layout.