How can I fix the display issue with my size chart on both PC and mobile?

[guvezamza]

My Website Link: https://05f505-3.myshopify.com/products/test-urun-2

Code:

<table height="11" style="width: 475.8px;" data-mce-fragment="1" data-mce-style="width: 475.8px;">
<tbody data-mce-fragment="1">
<tr data-mce-fragment="1">
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;"><strong> SIZE</strong></td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;"><strong>BUST</strong></td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;"><strong>WAIST</strong></td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;"><strong>HIPS</strong></td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;"><strong>LENGTH</strong></td>
</tr>
<tr data-mce-fragment="1">
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;"><strong>S</strong></td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;">85-91</td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;">59-69</td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;">81-91</td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;">128</td>
</tr>
<tr data-mce-fragment="1">
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;"><strong>M</strong></td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;">89-95</td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;">63-73</td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;">85-95</td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;">130</td>
</tr>
<tr data-mce-fragment="1">
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;"><strong>L</strong></td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;">93-99</td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;">67-77</td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;">89-99</td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;">132</td>
</tr>
<tr data-mce-fragment="1">
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;"><strong>XL</strong></td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;">97-103</td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;">71-81</td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;">93-103</td>
<td style="width: 466.8px; text-align: center;" data-mce-fragment="1" data-mce-style="width: 466.8px; text-align: center;">134</td>
</tr>
</tbody>
</table>

It is very ugly show for pc and mobile. Can anyone help to me fix this issue.

Image look good but when i enter to website i meet ugly chart and not optimze to pc and mobile

[theycallmemakka · Accepted solution]

Hi @guvezamza ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.product-single__description table {
    width: auto!important;
    font-size: 13px!important;
}
</style>

Result:

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka