Bootstrap 5 - table-responsive - not working (for me) - html-table

Question

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>

Answer 1

You can make it horizontal scrollable by adding
overflow-x: auto;
.table-scrollable {
overflow-x: auto;
max-width: 600px;
box-shadow: inset 0 0 5px rgba(150, 150 ,150,0.35);
margin: auto;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="table-scrollable">
<table class="m-auto table table-striped table-hover table-responsive " 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>
<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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"></script>