Within my bootstrap container, there resides a boostrap table structured as such:
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="563c393e3816332e373b263a337835393b">[email protected]</a></td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d404c5f546d48554c405d4148034e4240">[email protected]</a></td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8de7f8e1f4cde8f5ece0fde1e8a3eee2e0">[email protected]</a></td>
</tr>
</tbody>
</table>
</div>
My goal is to maintain the container's size and structure while ensuring that there are no line breaks within the table. If one row in the table extends beyond the container width, it currently gets hidden behind the container. How can I adjust the layout so that the table content overflows to the right without being obscured by the container?