Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ General Web Design _ Sticky Table Header and href
Posted by: Don S Feb 13 2021, 01:50 PM
I am working on a website (https://simard57.synology.me/LHVCResortMap.html)
The site uses usemaps that has hrefs that link to a table that has a sticky header. The trouble I am having is when one of the "hot spot" areas (for example clicking Villa 9 in the Royal Villa map) on the map is clicked and the table is navigated to - the Target table entry (for Villa 9) is hidden under the sticky header and the page has to be scrolled to reveal the entry. Is there a way to ensure that does not happen? relatively new to much of what I am trying to do - and learning a lot but this is haunting me and affects the spit and polish of the site.
thank you
Don S
Posted by: pandy Feb 13 2021, 02:38 PM
I don't think there is a solution, not as long as the headers are part of the table.
'position: sticky' is 'position: fixed' on demand, so to speak. If you have a fixed bar at the top of the page, the top of the page's content will be hidden behind the bar. That's because
a box that's positioned fixed or absolute takes up no space and is on top of other, non positioned, content.
The same thing happens with your sticky TH row, but the row isn't fixed until the page is scrolled and it reaches the top of the window. So it looks normal at first when you scroll down the page (normal scrolling, I mean), but as soon as the blue bar reaches the top of the window it turns fixed and covers the top of the rest of the table.
The fix for this is normally to add some top margin to the content so it isn't covered by the fixed bar initially. But there is no such thing as margins between table elements so I don't see how this can be fixed without removing the TH row and have the headers in a DIV or something above the table. But then your sorting script probably would need rewriting. Or maybe not, I didn't look at it.
Posted by: Christian J Feb 13 2021, 05:24 PM
The fix for this is normally to add some top margin to the content so it isn't covered by the fixed bar initially. But there is no such thing as margins between table elements
How about adding top padding or border to the targetted row's cells? Like this:
Posted by: pandy Feb 13 2021, 06:00 PM
Well, padding would probably be better and the id needs to be moved from the TR to a TD. But problem is all rows are targeted, so the table would end up looking pretty wonky. So even more JS would be needed to change the style dynamically as the image map is clicked, I suppose. Feels rather convoluted. But yeah, probably doable.
Posted by: Christian J Feb 13 2021, 06:15 PM
the id needs to be moved from the TR to a TD.
Why?
No, since I'm using the :target pseudo-class, only the currently targetted row's cells get styled. No javascript needed either.
Posted by: pandy Feb 13 2021, 07:02 PM
the id needs to be moved from the TR to a TD.
Why?
I don't know. Actually, when I tried it worked best with the id inside the cell (on the link for example). Thought it was odd, because one would think the higher up the id is, the less would be hidden.
No, since I'm using the :target pseudo-class, only the currently targetted row's cells get styled. No javascript needed either.
Oh christ. I didn't notice and I didn't even think about that. Well, that should mean the problem is solved after all! 👍
Posted by: Don S Feb 13 2021, 07:05 PM
I don't think there is a solution, not as long as the headers are part of the table.
'position: sticky' is 'position: fixed' on demand, so to speak. If you have a fixed bar at the top of the page, the top of the page's content will be hidden behind the bar. That's because
a box that's positioned fixed or absolute takes up no space and is on top of other, non positioned, content.
The same thing happens with your sticky TH row, but the row isn't fixed until the page is scrolled and it reaches the top of the window. So it looks normal at first when you scroll down the page (normal scrolling, I mean), but as soon as the blue bar reaches the top of the window it turns fixed and covers the top of the rest of the table.
The fix for this is normally to add some top margin to the content so it isn't covered by the fixed bar initially. But there is no such thing as margins between table elements so I don't see how this can be fixed without removing the TH row and have the headers in a DIV or something above the table. But then your sorting script probably would need rewriting. Or maybe not, I didn't look at it.
is there a way to "float" the table header so the rest of the table fills the space below it?
Posted by: pandy Feb 13 2021, 07:57 PM
No. But read what Christian wrote. He thought of a solution.
Posted by: Don S Feb 13 2021, 08:08 PM
No. But read what Christian wrote. He thought of a solution.
I tried adding the border-top to the class for the <td> and it created an unappealing black bar across the top of the cells in the row and it was partially covered by the header. I then tried to add it to the <td> and it was not much different
what am I missing?
Posted by: pandy Feb 14 2021, 04:38 AM
You must use the selector Christian used. It only matches the cells in the targeted row, not all of them. And obviously you need to style the border further.
But you can use padding instead. I think it needs to be a little larger, either you use border or padding, like 1.4 or 1.5 em.
Try this.
tr:target td { padding-top: 1.4em !important }
I used !important to override other styling you have for padding.
Posted by: Don S Feb 14 2021, 09:13 AM
You must use the selector Christian used. It only matches the cells in the targeted row, not all of them. And obviously you need to style the border further.
But you can use padding instead. I think it needs to be a little larger, either you use border or padding, like 1.4 or 1.5 em.
Try this.
tr:target td { padding-top: 1.4em !important }
I used !important to override other styling you have for padding.
Awesome - I misunderstood what Christian posted and just added to the tr I had in CSS. adding the line as posted fixed it and it now works as I hoped it would. Appreciate the wisdom all of you share. Thank you again
Posted by: pandy Feb 14 2021, 09:43 AM
Thank Christian. I totally overlooked this option. 
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)