Dropdown-menu visible outside parent-element that has overflow: auto

Question

I have a table that is very wide. This is why I have a scrollbar on the table both on the X-axis and Y-axis.

 overflow-x: auto;
 overflow-y: scroll;

In a cell inside the table, I put a dropdown-menu. This works perfectly. BUT if I open the dropdown-menu for a row far down, the dropdown is hidden behind the end of the table and I have to scroll down to see it. I can make this visible by making the table css

 overflow: visible;

But then I lose my scrollbars on the table. Is there a way to make the dropdown show even if I have scrollbars?

Answer 1

Try with The z-index property, It specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Default value: auto.

Example