How do I prevent horizontal scroll caused by a table overflow on mobile devices?

Xavier Kufuna 0
Viewed 37

I have a table inside a bootstrap container, row and column. Everything works fine on large screens but on smaller screens (phones), some content in the tables causes a horizontal scroll that destroys how the footer looks and the site is just a mess. Is there a fix to this? Here is an example of my code

<div class="container">
 <div class="row">
  <div class="col-12">
   <table class="table">
    <tr>
     <td>
      <!-- code in here -->
     </td>
     <td>
      <!-- overflowing code in here -->
     </td>
    </tr>
   </table>
  </div>
 </div>
</div>

Here is a link to a page with this issue on my website StudyAfrica - University

Please help, I've tried multiple searches to no avail.

javascript css html
1 Answers

The problem occurs because one of the link you used doesn't have a break-word ruler. Normally WordPress does this automatically but since it's a link they are not included as it would look terrible. So what you need to do is to give that link a class and then resize it by font-size:12px or smaller until it fits to the table.

This is how it looks when you use word-break: break-all; ruler which ruins the table: enter image description here

And this is how it looks when you use the class you will give and resize the font just for that link and i dont think it would be user friendly:

enter image description here

So my recommendation would be to use a text linked to the website like this ( looks cleaner when you make it smaller font than the rest or bigger):

enter image description here

Selcuk xD0
Related