Having an issue with my Bootstrap table on mobile resolution. In this situation, the table is not displaying correctly and has content extending off the screen. Here is the code in question:
<table class="table table-hover table-dark mt-3 table-bordered">
<thead>
<tr>
<th scope="col" >#</th>
<th scope="col" >Value</th>
<th scope="col" >Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Username</th>
<td><?=$Username?></td>
<td></td>
</tr>
<tr>
<th scope="row">Email</th>
<td><?=$Email?></td>
<td></td>
</tr>
</tbody>
</table>
Looking at the image, it's clear that the text is overflowing and not fitting within the screen. How can I address this issue?