[Problème] adaptation tableau sur tous les écrans

[kinouplay]

Bonjour, j'ai un soucis avec un tableau que j'ai fait.
J'ai créé un tableau avec des div (un tableau de 5 colonnes).
Mais il ne s'adapte pas automatiquement aux divers écrans.
Je recherche un code css qui pourrait me permettre de faire ceci, auriez-vous un code css qui me permettrait de faire ceci. Merci par avance de votre aide.

[Tortue Genial 69]

hello,

arfff les tableaux c'est toujours pénible...
déjà ton template peut avoir un impact (si bootstrap ou pas), selon les classes utilisées.

sinon quelques liens qui devraient t'aider :

https://css-tricks.com/responsive-data-tables/

https://codepen.io/AllThingsSmitty/pen/MyqmdM

[manu93fr]

Bonjour, j'ai un soucis avec un tableau que j'ai fait.
J'ai créé un tableau avec des div (un tableau de 5 colonnes).
Mais il ne s'adapte pas automatiquement aux divers écrans.
Je recherche un code css qui pourrait me permettre de faire ceci, auriez-vous un code css qui me permettrait de faire ceci. Merci par avance de votre aide.

Heu ... un tableau "fait" avec des DIV ...

Tu pourrais poster le code source ? Car a mon avis tu ne pars pas dans la bonne direction
Explique nous plutôt ton besoin, ce que tu cherches a faire ... car un tableau n'est pas vraiment fait pour gérer du responsive (pour la présentation du site) mais pour afficher un résultat structuré ...

[kinouplay]

Bonjour, désolé pour la réponse tardive, j'avais pris quelques jours de congés.

Voici les codes htlm et css que j'utilise

<h4 style="text-align: center;"><span style="color: #000000;"><a href="blogs" style="color: #000000;">- B L O G S -</a></span></h4>
<div class="blocs-easyblog" style="background-color: #f3f3f3;"><span style="color: #000000;"><a href="index.php?option=com_content&view=article&id =510:entete-posts-les-plus-populaires&catid=2&Itemid=101">POSTS LES + POPULAIRES</a></span></div>
<div class="blocs-easyblog" style="background-color: #dedede;"><span style="color: #000000;"><a href="index.php?option=com_content&view=article&id =512:entete-posts-les-plus-commentes&catid=2:non-categorise&Itemid=101">POSTS LES + COMMENTéS</a></span></div>
<div class="blocs-easyblog" style="background-color: #f3f3f3;"><span style="color: #000000;"><a href="index.php?option=com_content&view=article&id =513:entete-les-derniers-blogs&catid=2:non-categorise&Itemid=101">LES DERNIERS POSTS</a><br /></span></div>
<div class="blocs-easyblog" style="background-color: #dedede;"><span style="color: #000000;"><a href="index.php?option=com_content&view=article&id =514:entete-les-derniers-blogueurs&catid=2:non-categorise&Itemid=101">LES DERNIERS BLOGUEURS</a></span></div>
<div class="blocs-easyblog" style="background-color: #f3f3f3;"><span style="color: #000000;"><a href="index.php?option=com_content&view=article&id =518:blogs-les-categories-et-sous-categories&catid=2:non-categorise">LES CATEGORIES</a></span></div>

CSS
/* Blocs- 5 blocs DIV sous forme d'un tableau*/
.blocs-easyblog {
font-size:1.8em;
text-align: center;
width:20%;
float:left;
padding:15px;
box-sizing: border-box;
}

@media screen and (max-width: 320px) {
.blocs-easyblog {
width:100%;
font-size:1em;
}

}
@media screen and (max-width: 480px) {
.blocs-easyblog {
width:100%;
font-size:1em;
}

}
@media screen and (max-width: 600px) {
.blocs-easyblog {
width:100%;
font-size:1em;
}

}
@media screen and (max-width: 768px) {
.blocs-easyblog {
width:100%;
font-size:1em;
}