Table format is not correct on Mobile and Desktop

[Zuschlafen]

Hello community,

I have a chart table, however, when i use it on product page (in collapse row) it seems terrible 🙂 (numbers mix in rows)  either desktop and mobile phone. How can i fix it ? i think it's related to media css but i'm not sure.HTML code, Photos and link below. Thank in advance for your help.

HTML code

<br />
<table cellspacing="0" border="0"><colgroup span="9" width="auto"></colgroup>
<tbody>
<tr>
<td align="center" valign="middle" rowspan="2" colspan="2"></td>
<td align="center" valign="middle" rowspan="2">S</td>
<td align="center" valign="middle" rowspan="2">M</td>
<td align="center" valign="middle" rowspan="2">L</td>
<td align="center" valign="middle" rowspan="2">XL</td>
<td align="center" valign="middle" rowspan="2">2XL</td>
<td align="center" valign="middle" rowspan="2">3XL</td>
</tr>
<tr></tr>
<tr>
<td align="left" valign="middle" rowspan="2" colspan="2">Brustumfang (cm)</td>
<td align="center" valign="middle" rowspan="2">92-98</td>
<td align="center" valign="middle" rowspan="2">98-104</td>
<td align="center" valign="middle" rowspan="2">104-110</td>
<td align="center" valign="middle" rowspan="2">110-116</td>
<td align="center" valign="middle" rowspan="2">116-122</td>
<td align="center" valign="middle" rowspan="2">122-126</td>
</tr>
<tr></tr>
<tr>
<td align="left" valign="middle" rowspan="2" colspan="2">Taillenumfang (cm)</td>
<td align="center" valign="middle" rowspan="2">68-72</td>
<td align="center" valign="middle" rowspan="2">76-80</td>
<td align="center" valign="middle" rowspan="2">84-88</td>
<td align="center" valign="middle" rowspan="2">92-96</td>
<td align="center" valign="middle" rowspan="2">100-104</td>
<td align="center" valign="middle" rowspan="2">108-112</td>
</tr>
<tr></tr>
<tr>
<td align="left" valign="middle" rowspan="2" colspan="2">Hüftumfang (cm)</td>
<td align="center" valign="middle" rowspan="2">108-112</td>
<td align="center" valign="middle" rowspan="2">112-116</td>
<td align="center" valign="middle" rowspan="2">116-120</td>
<td align="center" valign="middle" rowspan="2">120-124</td>
<td align="center" valign="middle" rowspan="2">124-128</td>
<td align="center" valign="middle" rowspan="2">128-132</td>
</tr>
<tr></tr>
</tbody>
</table>
<p><em>Es ist gut, eine Nummer größer zu wählen.</em></p>

Desktop

Mobile

and link: https://zuschlafen.de/products/susse-cartoon-pyjamas-fur-damen

[PageFly-Victor · Accepted solution]

Hi @Zuschlafen 

You can try this code by following these steps:

Go to Online store => themes => actions => edit code  and add this code on file theme.liquid before tag </body>

<style>

@media screen and (max-width: 767px){
table:not([class]) td, table:not([class]) th{
padding: 0 !important;
}
}

</style>

Hope this answer helps.

Best regards,

Victor | PageFly

[Zuschlafen]

seems better right now, Thank you 

[Kani]

Hi @Zuschlafen 

You can try to add a fixed width for this table, then user will able to scroll it to view all content

[Zuschlafen]

to be honest, i don't want to have scroll 

[Zuschlafen]

still some issue, would you please check @PageFly-Victor 

Link: https://zuschlafen.de/products/luxurioser-seiden-anzug-fur-damen

Html code
<table cellspacing="0" border="0">
<colgroup span="9" width="auto"></colgroup>
<tbody>
<tr>
<td colspan="2" rowspan="2" valign="middle" align="center"></td>
<td rowspan="2" valign="middle" align="center">M</td>
<td rowspan="2" valign="middle" align="center">L</td>
<td rowspan="2" valign="middle" align="center">XL</td>
<td rowspan="2" valign="middle" align="center">XXL</td>
<td rowspan="2" valign="middle" align="center">3XL</td>
</tr>
<tr></tr>
<tr>
<td colspan="2" rowspan="2" valign="middle" align="left">Brustumfang (cm)</td>
<td rowspan="2" valign="middle" align="center">96-98</td>
<td rowspan="2" valign="middle" align="center">98-102</td>
<td rowspan="2" valign="middle" align="center">102-106</td>
<td rowspan="2" valign="middle" align="center">106-110</td>
<td rowspan="2" valign="middle" align="center">110-114</td>
</tr>
<tr></tr>
<tr>
<td colspan="2" rowspan="2" valign="middle" align="left">Taillenumfang (cm)</td>
<td rowspan="2" valign="middle" align="center">86-88</td>
<td rowspan="2" valign="middle" align="center">88-90</td>
<td rowspan="2" valign="middle" align="center">90-92</td>
<td rowspan="2" valign="middle" align="center">92-94</td>
<td rowspan="2" valign="middle" align="center">94-96</td>
</tr>
<tr></tr>
<tr>
<td colspan="2" rowspan="2" valign="middle" align="left">Hüftumfang (cm)</td>
<td rowspan="2" valign="middle" align="center">100-104</td>
<td rowspan="2" valign="middle" align="center">104-108</td>
<td rowspan="2" valign="middle" align="center">108-112</td>
<td rowspan="2" valign="middle" align="center">112-116</td>
<td rowspan="2" valign="middle" align="center">116-120</td>
</tr>
<tr></tr>
</tbody>
</table>
<p><em>Es ist gut, eine Nummer größer zu wählen.</em></p>

[PageFly-Victor]

Can you tell me what size you want the table to be? because from my side it looks very good.