When I have a bootstrap-select inside a td of a table-responsive table, I encounter an issue. If I click on the select-picker, the dropdown menu is not completely visible as the visibility is limited by the table margin. To address this, I tried adding data-container="body" (or another element in data-container as per official guidelines). However, the page automatically scrolls to the top every time, and I have to scroll back down to the table to see the dropdown correctly opened and visible.
<div class="table-responsive">
<table class="table" id="table">
<thead>
<tr class="d-flex">
<!-- others -->
</thead>
<tbody id="participants">
<!-- others -->
<td class="col-3">
<select class="selectpicker" multiple data-live-search="true">
<!-- options -->
</select>
</td>
</tbody>
</table>
</div>