I'm currently using Bootstrap 4 to incorporate a table into my website and encountering difficulties in making it responsive on mobile phones. Unfortunately, when viewing the table on a phone, it appears very zoomed out and not user-friendly. Can anyone suggest how I can modify this table to ensure that it is fully responsive and readable on smaller screens?
Below is the code for my table:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col"></div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-11 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Setup Table</h1>
</div>
<div class="table-responsive table-hover">
<table class="table table-striped" id="setup-table">
<thead>
<tr>
<th scope="col">Column1</th>
<th scope="col">Column2</th>
<th scope="col">Column3</th>
<th scope="col">Column4</th>
<th scope="col">Column5</th>
</tr>
</thead>
<tbody>
<div class="row text-center" style="display:flex; flex-wrap:wrap;">
<tr>
<th scope="row">some value</th>
<td>some value</td>
<td>some value</td>
<td>some value</td>
<td>some value</td>
</tr>
</div>
</tbody>
</table>
</div>
</main>
<div class="col"></div>
</div>
</div>Could the issue be due to the table being within a container?
EDIT:
This is what the table looks like in mobile view: https://i.sstatic.net/KSxz2.png