I am trying to create a data table that has a sticky column. In this column, I also like to create a bootstrap dropdown button. But bootstrap dropdown has a conflict with the sticky position. The Dropdown menu always opens behind the sticky column. When the dropdown opens the top end position, it looks completely fine, but when it open with the bottom end position, the problem then begins.
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/bootstrap@5.0.0-beta2/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>
<tr>
<td>Hello 1</td>
<td>Hello 1</td>
<td>Hello 1</td>
<td>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</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>
<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>
<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/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>