My website displays a table within a bootstrap container, row, and column. While everything looks good on larger screens, the content within the table is causing a horizontal scroll on smaller screens, making the footer look distorted. This results in a messy appearance of the site. Is there a solution to this issue? Below is an example of the code I am using:
<div class="container">
<div class="row">
<div class="col-12">
<table class="table">
<tr>
<td>
<!-- code goes here -->
</td>
<td>
<!-- overflowing code goes here -->
</td>
</tr>
</table>
</div>
</div>
</div>
To see this issue in action, you can visit the following link on my website: StudyAfrica - University
I have conducted several searches in an attempt to resolve this problem but have not found a suitable solution. Your help would be greatly appreciated.