table en css : comment faire un renvoi automatique à la ligne ?

[bagou01]

Bonjour,
je transforme un site en responsive, et j'aimerais savoir si il est possible, dans une table faite en css, de générer un renvoi automatique du contenu à la ligne?
je m'explique :
disons que ma table ressemble à ceci au départ :

<div class="table">
		<div class="tr">
			<div class="td">
contenu
</div>
<div class="td">
contenu
</div>
<div class="td">
contenu
</div>
</div>

bien j'aimerais que ces trois cellules, si la résolution devient insuffisante pour les afficher, renvoient la 3e à la ligne.

donc j'ai pensé qu'en leur assignant une width en % plutot qu'en px, ça le ferait, mais ça me donne un scroll horizontal....


avant de demander si quelqu'un a une solution, quelqu'un comprend-il ma question? :-p

[webcrea]

Re : table en css : comment faire un renvoi automatique à la ligne ?

en insérant un min-width:200px; par exemple fera en sorte que tes div passeront à la ligne dès le minimum atteint

[bagou01]

Re : table en css : comment faire un renvoi automatique à la ligne ?

je ne comprends pas trpo, moi il s'agit plus d'un maxium non?
"dés que tu atteins la fin de l'espace width dispo, envoie la div suivante à la ligne, (comme si je créais une tr automatique)"

[webcrea]

Re : table en css : comment faire un renvoi automatique à la ligne ?

tu gardes tes width en % mais tu forces le retour à la ligne par un minimum dans la div qui doit passer à la ligne

[bagou01]

Re : table en css : comment faire un renvoi automatique à la ligne ?

je ne comprends pas, si je mets un min-width sur ma <div style="tr"></div> en quoi ça va forcer un retour à la ligne?

[webcrea]

Re : table en css : comment faire un renvoi automatique à la ligne ?

quand la largeur va diminuer, ta div va automatiquement passer à la ligne afin de maintenir sa largeur minimum

[bagou01]

Re : table en css : comment faire un renvoi automatique à la ligne ?

mmh vai tester ça, merci
donc théoriquement, peu importe le nombre de cellules je n'ai besoin que d'une seule row avec un min-width?

[cb75ter]

Re : table en css : comment faire un renvoi automatique à la ligne ?

Bonjour,

Si j'ai bien compris ton souhait, voilà ce que je ferais pour le HTML :

<div class="table">
    <div class="tr">
        <div class="td premiere">contenu 1</div>
        <div class="td deuxieme">contenu 2</div>
        <div class="td troisieme">contenu 3</div>
    </div>
</div> 

Et du côté CSS :

.premiere,
.deuxieme,
.troisieme {
width:33.333333%;
float:left;
}


@media (max-width: 680px) {


    .premiere,
    .deuxieme{
    width:50%
    }


    .troisieme {
    clear:both;
    width:100%
    }


}

Il ne reste plus qu'à adapter la largeur dans la ou les media queries.