Hi there, I'm encountering an issue while attempting to utilize the responsive table feature in Bootstrap 4.
If the table doesn't have enough content to fill the complete width, it ends up looking like this:
Table Layout https://i.sstatic.net/JLSMB.png
Here is a snippet of my code:
<div class="container" id="maincontainer">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>Upcoming Events:</p>
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<p>Past Events:</p>
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">30.06.2017 15:30 - 16:00</th>
<td>2/2</td>
<td>dafdfsfa</td>
<td>97</td>
</tr>
</tbody>
</table>
</div>I would greatly appreciate any assistance with resolving this matter.
Warm regards, Alex