Below is a given code snippet:
header {
text-align: center;
}
/* This section is just for simulation purposes */
p.text {
width: 20rem;
height: 50rem;
}<html>
<body>
<header>
<h1>Page Title</h1>
<details>
<summary>Click Me</summary>
<p>More information</p>
<p>Even more stuff</p>
</details>
</header>
<table>
<tr>
<td><p class="text">Lorem</p></td>
<td><p class="text">ipsum</p></td>
<td><p class="text">dolors</p></td>
<td><p class="text">itamet</p></td>
<td><p class="text">consectetura</p></td>
<td><p class="text">dipiscinge</p></td>
<td><p class="text">litsed</p></td>
<td><p class="text">doeiusmod</p></td>
</tr>
<tr>
<td><p class="text">Lorem</p></td>
<td><p class="text">ipsum</p></td>
<td><p class="text">dolors</p></td>
<td><p class="text">itamet</p></td>
<td><p class="text">consectetura</p></td>
<td><p class="text">dipiscinge</p></td>
<td><p class="text">litsed</p></td>
<td><p class="text">doeiusmod</p></td>
</tr>
</table>
</body>
</html>The goal is to have the content of <header> centered when horizontally scrolling, but disappear when vertically scrolling.
I've experimented with different CSS properties like position: sticky; left: 0;, but have not achieved the desired result. The closest I got was with this code:
header {
text-align: center;
position: fixed;
top: 0;
left: 0;
width: 100vw;
z-index: -1;
}
table {
margin-top: 7rem;
}
However, this solution fails when expanding the <details> element and doesn't function properly on Firefox Mobile.
Looking for a pure, semantic approach without relying on frameworks. Open to some use of JavaScript if necessary.
Thank you for your assistance.