I need help figuring out how to keep my bootstrap table centered in the middle of the page, instead of adjusting based on the tab selected within a bootstrap nav tab. Currently, it centers around the active tab, but I want it to stay in the middle no matter which tab is clicked. Any suggestions on how to achieve this?
https://i.sstatic.net/Idnxl.png https://i.sstatic.net/bXIpd.png
<div class="row">
<div class="row justify-content-center">
<div class="nav-wrapper col-7" id="profile-wrapper">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" id="profileItem" role="presentation">
<button class="nav-link active" id="basicInfo-tab" data-bs-toggle="tab" data-bs-target="#basicInfo" type="button" role="tab" aria-controls="basicInfo" aria-selected="true">Basic Info</button>
</li>
<li class="nav-item" id="profileItem" role="presentation">
<button class="nav-link" id="systemUse-tab" data-bs-toggle="tab" data-bs-target="#systemUse" type="button" role="tab" aria-controls="systemUse" aria-selected="false">System use</button>
</li>
</ul>
<br>
</div>
</div>
<div class="tab-content ml-1" id="myTabContent">
<div class="tab-pane show active" id="basicInfo" role="tabpanel" aria-labelledby="basicInfo-tab">
<div class="row justify-content-center">
<div class="col-7">
<table class="table table-bordered vertical-align" id="profile_table">
<tbody>
<tr>
<th scope="row" id="quality">Placeholder</th>
<td id="quality_value"&rt; Test1</td>
</tr>
<tr>
<th scope="row" id="quality">Placeholder</th>
<td id="quality_value"&rt; Test2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane show" id="systemUse" role="tabpanel" aria-labelledby="systemUse-tab">
<div class="row justify-content-center">
<div class="col-7">
<table class="table table-bordered vertical-align" id="profile_table">
<tbody>
<tr>
<th scope="row" id="quality">First Time User</th>
<td id="quality_value"&rt; No </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>