What is the solution for adjusting a table on mobile view?
I am aiming to achieve: https://i.sstatic.net/YkKAW.png
However, it currently looks like this:
https://i.sstatic.net/GW5mX.png
Here are my code snippets:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h2>Text:</h2>
<table class="table table-bordered table-dark">
<tbody>
<tr>
<td>Name</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text text text text text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td><
</tr>
</tbody>
</table>
<a href="" class="btn btn-danger float-left">Select</a><a href="" class="btn btn-success float-right">Go Ahead</a>
</div>Is there a way to optimize the table display for mobile devices? The current output does not render properly on smaller screens and requires zooming in!