Tables not showing properly in mobile device


  • Member
    paulgian
    July 21, 2020 at 6:33 am #34976

    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

    Sorry, this forum is for verified users only. Please Login or Register to continue

Comments are closed.