Rendre une section avec "tables" responsive

[Ecommerce First]

J'ai besoin d'un petit coup de main pour mettre cette section de code via le CMS responsive. Comment dois-je-procéder ?

Page avec le problème: https://kslstore.ca/fr

Code actuel qui n'est pas responsive:

<div id="imageMenu">
<table style="float: left;">
<tbody>
<tr>
<td rowspan="4" style="text-align: center;"><img src="https://kslstore.ca/img/cms/Photo%20gauche2.jpg" alt="" width="249" height="646" /><span></span></td>
<td><a href="https://kslstore.ca/80-hauts"><img src="https://kslstore.ca/img/cms/Bella.jpg" alt="" width="255" height="301" /></a></td>
<td><a href="https://kslstore.ca/64-robes-jupe"><img src="https://kslstore.ca/img/cms/Polka.jpg" alt="" width="255" height="301" /></a></td>
<td><a href="https://kslstore.ca/71-accessoires"><img src="https://kslstore.ca/img/cms/Love.jpg" alt="" width="255" height="301" /></a></td>
<td><a href="https://kslstore.ca/69-nos-une-piece"><img src="https://kslstore.ca/img/cms/HomeNav/Une%20pi%C3%A8ce-509%20X%20600.jpg" alt="" width="255" height="301" /></a></td>
</tr>
<tr>
<td style="text-align: center;"><span><a href="https://kslstore.ca/80-hauts">HAUTS</a></span></td>
<td style="text-align: center;"><span><a href="https://kslstore.ca/64-robes-jupe">ROBES</a></span></td>
<td style="text-align: center;"><a href="https://kslstore.ca/71-accessoires">ACCESSOIRES</a></td>
<td style="text-align: center;"><a href="https://kslstore.ca/69-nos-une-piece">ONE PIECES</a></td>
</tr>
<tr>
<td><a href="https://kslstore.ca/81-bas"><img src="https://kslstore.ca/img/cms/Julie-Sandrine.jpg" alt="" width="255" height="301" /></a></td>
<td><a href="https://kslstore.ca/57-transformable"><img src="https://kslstore.ca/img/cms/HomeNav/Transformable-509%20X%20600.jpg" alt="" width="255" height="301" /></a></td>
<td><a href="https://kslstore.ca/79-sous-vetements-pyjamas"><img src="https://kslstore.ca/img/cms/Madona.jpg" alt="" width="255" height="301" /></a></td>
<td><a href="https://kslstore.ca/56-sport"><img src="https://kslstore.ca/img/cms/HomeNav/Sport-509%20X%20600.jpg" alt="" width="255" height="301" /></a></td>
</tr>
<tr>
<td style="text-align: center;"><a href="/81-bas">Bas</a></td>
<td style="text-align: center;"><a href="https://kslstore.ca/57-transformable">TRANSFORMABLE</a></td>
<td style="text-align: center;"><a href="https://kslstore.ca/79-sous-vetements-pyjamas">SOUS-VÊTEMENTS</a></td>
<td style="text-align: center;"><a href="https://kslstore.ca/56-sport">SPORT</a></td>
</tr>
</tbody>
</table>
</div>

 

 

 

[Eolia]

https://www.w3schools.com/howto/howto_css_table_responsive.asp

Mais utiliser une structure de table pour afficher des images on se croirait en 1998...

Le css et surtout bootstrap on plein de règles prévues pour ce type d'affichage (regardez du côté de la propriété flex^^)

[Ecommerce First]

Je sais que ça fait 1998  😉

Je dois juste corriger un problème que le client à créé lui même...temporairement en attendant un nouveau site en développement.

Merci