Dropdowns in Tables have z-index issues with subsequent rows

[e-Dan-K]

Prerequisites

• [x] I have searched for duplicate or closed issues
• [x] I have validated any HTML to avoid common problems
• [x] I have read the contributing guidelines

Describe the issue

I have a two-row dropdown that appears when a button is pressed within a table cell. On narrow iPhones, the dropdown appears to the left. When it is drawn, however, the second row of the dropdown is obscured by the next row of the table:

On the last row of the table, it displays properly:

This has been reliably recreatable on iPhones (or iPhone emulators... I can recreate it in Firefox and Chrome on Windows when I select iPhone 12/13 Pro in the inspector:

With this demo page I can also recreate it under Windows Firefox and Chrome when selecting Galaxy S20 emulation.

Attached is reasonably minimized code that replicates the issue.

Reduced test cases

gamepage_v2.html

Viewable at: https://azure-marisa-69.tiiny.site

What operating system(s) are you seeing the problem on?

iOS, Android

What browser(s) are you seeing the problem on?

Safari, Firefox, Chrome

What version of Bootstrap are you using?

v5.3.3

[florianlacreuse]

Everything works fine when removing .position-sticky from your cells <td>. Do you really need that?

[e-Dan-K]

Everything works fine when removing .position-sticky from your cells <td>. Do you really need that?

I don't need it to be sticky, but if there is a note in the 4th column and you need to scroll right to read it, it is helpful to still be able to see who the note applies to.

Open to alternatives though...