I'm attempting to design a data table with a sticky column that includes a Bootstrap dropdown button. Unfortunately, the dropdown conflicts with the sticky position and ends up opening behind the fixed column. It looks fine when opened from the top end but encounters issues when opened from the bottom end.
td,th{
white-space: nowrap;
}
table{
position: relative;
overflow-y: scroll;
}
tr th{
padding: 20px;
border: 1px solid red;
}
th:last-child{
position: sticky;
right: 0;
top: auto;
color: red;
background: black;
}
td{
padding: 20px;
border: 1px solid red;
}
td:last-child{
position:sticky;
right: 0;
top: auto;
color: red;
background:cyan;
}
.dropdown.dropdown-menu{
z-index: 9999;
}<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fefee5e2e5e3f0e1d1a4bfa1bfa1bcf3f4e5f0a3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<th>Menu 1</th>
<th>Menu 2</th>
<th>Menu 3</th>
<th>Menu 4</th>
</tr>
<tr>
<td>Hello 1</td>
<td>Hello 1</td>
<td>Hello 1</td>
<td>Hello 1</td>
</tr>
<tr>
<td>Hello 1</td>
<td>Hello 1</td>
<td>Hello 1</td>
<td>Hello 1</td>
</tr>
...
<tr>
<td>Hello 1</td>
<td>Hello 1</td>
<td>Hello 1</td>
<td>Hello 1</td>
</tr>
</table>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f3d30302b2c2b2d3e2f1f6a716f716f723d3a2b3e6d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>