After encountering a persistent issue with Bootstrap 5 dropdowns being clipped by the table or table-responsive div, despite the data-boundary="viewport" attribute not working as expected, I found a solution. Simply adding the position-static class resolved the problem.
https://i.sstatic.net/v5XFW.png
Further experimentation led me to discover that removing the outer dropdown div and applying the dropdown class directly to the button also fixed the issue.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57353838232423253627176279667964">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>
<div class="dropdown position-static">
<span type="button" data-bs-toggle="dropdown">
<img src="https://via.placeholder.com/80x20" title="Menu" />
</span>
<div class="dropdown-menu dropdown-menu-right">
<a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
<div class="dropdown-divider"></div>
<a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
<a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
<a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
<a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
<a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
</div>
</div>
</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671209160914">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>According to Bootstrap documentation, the outer div is necessary for dropdowns, but removing it and directly applying the class to the button worked for me without any issues. If you have insights on the purpose of the outer div or potential drawbacks of using this simplified structure, please share.