I can't get horiz scroll working with the table-responsive unless I add sth like: style = "width: 1000px" to the table (see below). But this causes the vertial scroll bar (if any) to be displaced to the right of the table.
Can someone point me in the right direction?
<!-- table -->
<div class="table-responsive">
<table class="m-auto table table-striped table-hover"
style = "width: 1000px'">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">COL 02 - 20</th>
<th scope="col">COL 03 - 20</th>
<th scope="col">COL 04 - 30</th>
<th scope="col">COL 05 - 10</th>
<th scope="col">COL 06 - 10</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Row 01 - Col 01</td>
<td>Row 01 - Col 02</td>
<td>Row 01 - Col 03</td>
<td>Row 01 - Col 04</td>
<td>Row 01 - Col 05</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Row 02 - Col 01</td>
<td>Row 02 - Col 02</td>
<td>Row 02 - Col 03</td>
<td>Row 02 - Col 04</td>
<td>Row 02 - Col 05</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Row 03 - Col 01</td>
<td>Row 03 - Col 02</td>
<td>Row 03 - Col 03</td>
<td>Row 03 - Col 04</td>
<td>Row 03 - Col 05</td>
</tr>...etc...
<tr>
<th scope="row">6</th>
<td>Row 06 - Col 01</td>
<td>Row 06 - Col 02</td>
<td>Row 06 - Col 03</td>
<td>Row 06 - Col 04</td>
<td>Row 06 - Col 05</td>
</tr>
</tbody>
</table>
</div>