Tables not showing properly in mobile device

Hi,
I am trying to make the tables to be user friendly on mobile devices but they always go outside the border.

Example:

<table class="aqua_table"  width="100%">
<tbody>
<tr>
<th></th>
<th style="text-align: center;">Excellent</th>
<th style="text-align: center;">Very Good</th>
<th style="text-align: center;">Good</th>
<th style="text-align: center;">Fair/Poor</th>
</tr>
<tr>
<td>Table %</td>
<td style="text-align: center;">54% - 58%</td>
<td style="text-align: center;">52% - 60%</td>
<td style="text-align: center;">51% - 64%</td>
<td>Outside Ranges</td>
</tr>
<tr>
<td>Depth %</td>
<td style="text-align: center;">62% - 66%</td>
<td style="text-align: center;">60% - 68%</td>
<td style="text-align: center;">56% - 70%</td>
<td>Outside Ranges</td>
</tr>
<tr>
<td>Polish/Symmetry</td>
<td style="text-align: center;" colspan="2">Excellent - Very Good</td>
<td style="text-align: center;">Good</td>
<td>Outside Ranges</td>
</tr>
<tr>
<td>Length to Width</td>
<td style="text-align: center;">1.30 - 1.35</td>
<td style="text-align: center;">1.25 - 1.29
1.36 - 1.40</td>
<td style="text-align: center;">1.20 - 1.24
1.41 - 1.45</td>
<td>Outside Ranges</td>
</tr>
<tr>
<td>Girdle Thickness</td>
<td style="text-align: center;" colspan="2">Thin – Slightly Thick</td>
<td style="text-align: center;">V. Thin – Thick</td>
<td>Outside Ranges</td>
</tr>
<tr>
<td>Culet Size</td>
<td style="text-align: center;">None</td>
<td style="text-align: center;">Very Small</td>
<td style="text-align: center;">Small</td>
<td>Outside Ranges</td>
</tr>
</tbody>
</table>

This is what a screenshot of the rendered table looks like on my phone. Can you help offer guidance to fix this?

https://ibb.co/qD9fTDt