FYI: I mispoke about assigning it to th. Apparently, thead/tr cannot take a height statement, so it wont work there. (Sorry, don't use tables that much).
Another option is use grid divs instead of a table.
Announcement
Collapse
No announcement yet.
CSS sticky table headers in Miva
Collapse
X
-
Thanks for all the info. I'll definitely try out all your suggestions. I got the idea from here: https://css-tricks.com/position-stic...table-headers/
I can get the whole thing to work as a stand-alone HTML document, but when I copy/paste the code into Miva, the feature doesn't work.
Leave a comment:
-
Originally posted by VisHorizons View PostI have a table that requires a bit of scrolling to see the whole thing. I want the table header to remain on the screen as I scroll.
I made this test in a plain HTML document - click here
HTML Code:<style> .bbbbb th { position: sticky; top:0; height: 30px; background: red; } </style> <table class="bbbbb"> <thead> <tr> <th>october</th> <th>november</th> <th>december</th> <th>january</th> </tr> </thead> <tbody> <tr> <td>etc.</td> <td>etc.</td> <td>etc.</td> <td>etc.</td> </tr> </tbody> </table>
Any ideas on what the conflict is here? Thanks for any help.
- 1 like
Leave a comment:
-
Originally posted by dreamingdigital View PostBut I doubt it works properly with tables.
- 1 like
Leave a comment:
-
There are two basic issues with position:sticky. The first is, its Parent container MUST be position:relative, and second, it needs a specific height (and of course, content beneath it to trigger the scrolling. Here is a pretty good illustration of the issue:
https://medium.com/@elad/css-positio...s-54cd01dc2d46
Leave a comment:
-
Wow, position: sticky in CSS. That's new to me. LOL But I doubt it works properly with tables. Why don't you get it working here and then port that over to Miva and fight with whatever the ReadyTheme does to override you at that point.
https://www.w3schools.com/howto/tryi...sticky_element
Leave a comment:
-
CSS sticky table headers in Miva
I have a table that requires a bit of scrolling to see the whole thing. I want the table header to remain on the screen as I scroll.
I made this test in a plain HTML document - click here
HTML Code:<style> .bbbbb th { position: sticky; top:0; height: 30px; background: red; } </style> <table class="bbbbb"> <thead> <tr> <th>october</th> <th>november</th> <th>december</th> <th>january</th> </tr> </thead> <tbody> <tr> <td>etc.</td> <td>etc.</td> <td>etc.</td> <td>etc.</td> </tr> </tbody> </table>
Any ideas on what the conflict is here? Thanks for any help.Tags: None
Leave a comment: