My table layout is quite complex, and I need to implement a hover menu that appears with its position adjusted based on each row's position. Each row in the table is generated dynamically using React props.map function, which gives me the flexibility to manipulate the z-index of rows. However, I'm facing an issue where the menu does not appear on top of the "th" element as intended.
I suspect this issue has something to do with the Stacking Context, but I am unsure how to resolve it.
You can view a simplified version of my table in this fiddle: https://jsfiddle.net/4n9bj16x/2/
I have tried various solutions, some of which worked partially but caused other problems. What I ultimately need is to keep the first column fixed while ensuring that the menu overlaps all sibling "th" elements.
Approaches that partially worked but broke something else:
- Removing the "sticky" position from the "th" results in perfect overlapping of the menu but breaks the fixed first column functionality.
- Setting the menu to be relative positioned adds it to the normal document flow, but causes unwanted growth effects.
- Eliminating the background-color property of "th" makes it invisible and reveals underlying columns during scrolling.
Any assistance would be greatly appreciated!
Note: The original table is coded in React and SCSS for reference purposes.
HTML & CSS code example (scss format for readability):
.overflowTable {
overflow-x: scroll;
margin-left: 0;
overflow-y: visible;
padding: 0;
position: relative;
height: 100vh;
}
... (CSS styles continue)
<div class="overflowTable">
<table>
... (HTML table structure continues)
</table>
</div>