Не там много вкладок, удобнее клавиатуру вытаскивать после. Выглядят вкладки примерно так:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
<table class="table table-bordered table-hover testTable">
<thead>
<tr class="bg-info text-white">
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>тест1</td>
<td></td>
</tr>
<tr>
<td>тест1</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list"><table class="table table-bordered table-hover testTable">
<thead>
<tr class="bg-info text-white">
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>тест2</td>
<td></td>
</tr>
<tr>
<td>тест2</td>
<td></td>
</tr>
</tbody>
</table></div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list"><table class="table table-bordered table-hover testTable">
<thead>
<tr class="bg-info text-white">
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
</thead>
<tbody>
<tr>
<td>тест3</td>
<td></td>
</tr>
<tr>
<td>тест3</td>
<td></td>
</tr>
</tbody>
</table></div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list"><table class="table table-bordered table-hover testTable">
<thead>
<tr class="bg-info text-white">
<td>Ячейка 7</td>
<td>Ячейка 8</td>
</tr>
</thead>
<tbody>
<tr>
<td>тест5</td>
<td></td>
</tr>
<tr>
<td>тест5</td>
<td></td>
</tr>
</tbody>
</table></div>
</div>
</div>
</div>
Все это в цикле создается.
Там особо некуда input просто так засунуть)