1485 sujets

Web Mobile et responsive web design

[Résolu] Tableau Responsive, affichage par colonne impossible ?

Bonjour à tous, il s'agit de mon premier post sur ce forum, soyez indulgent s'il vous plait...

Voilà mon problème : je souhaite faire un tableau responsive mais d'une façon spéciale.
En effet je souhaiterais afficher le tableau colonne après colonne.

Pour PC (affichage normal) :

Colonne 1 | Colonne 2 | Colonne 3
Col1 - L1 | Col2 - L1 | Col3 - L1 |
Col1 - L2 | Col2 - L2 | Col3 - L2 |
Col1 - L3 | Col2 - L3 | Col3 - L3 |

Pour basse résolution :
Colonne { width: 100%; }
Ligne { width: 100%; }

Colonne 1
Col1 - L1
Col1 - L2
Col1 - L3
Colonne 2
Col2 - L1
Col2 - L2
Col2 - L3
Colonne 3
Col3 - L1
Col3 - L2
Col3 - L3

J'ai beau cherché sur internet, je ne trouve pas de solution qui corresponde vraiment le schéma ci-dessus..

J'espère avoir été assez clair dans mes explications. En espérant que quelqu'un puisse trouver une solution..

Merci d'avance, Gaël D.
Modifié par gaeldupont44 (02 Mar 2015 - 13:27)
Modérateur
Salut,

Regarde du côté des mails responsives. Tu trouveras la manière de procéder :


@media screen and (max-width: 640px) {
  .maclasse{
    display:block;
  }
}

ou (si ça passe pas)

@media screen and (max-width: 640px) {
  td[class=maclasse]{
    display:block;
  }
}
Si j'enlève les mots "colonne" et "ligne" cela s'exprime:
Comment afficher côte à côte trois <div> contenant des lignes sur un PC et les afficher l'une au dessus de l'autre sur un petit écran?

La difficulté c'est de faire en sorte que quand on est sur PC les lignes soient bien alignées.
 mon sens il faut avoir une idée precise du contenu des "ligne" et les styler en conséquence.
Modérateur
Bonjour,

De base et de manière absolue, ce n'est pas possible en CSS, les tables étant basées sur des lignes et non sur des colonnes.

Il est possible de contourner cela par javascript.

Sinon je dirais que comme les lignes n'ont apparemment pas d'importance sur les données, il n'est pas forcément nécessaire qu'elles soient alignées lignes par ligne. Ce qui permettrait de faire un affichage en trois colonnes sur la version large, permettre cette mise en page en mobile?

La question est donc que l'emploi du tableau me paraît douteux à l'origine.

edit: pas loin de papyJp.
effectivement, si le nombre d'éléments ou leurs tailles respectives sont plus ou moins connues, il y a d'autres moyens de bricoler un truc.
Modifié par kustolovic (02 Mar 2015 - 14:06)
merci à tous pour l’intérêt que vous portez à mon problème.
D'après ce que j'ai pu lire, je n'ai cas utiliser des <div> pour combler le problème ?
j'avais commencer avec des divs mais je savais pas comment faire pour afficher tour ça comme je le voulais en basse résolution....
si vous avez des idées je suis preneur Smiley smile
Modérateur
Salut,

Ce midi, je n'avais pas bien lu ton souci.

1. Que vas tu afficher ? @kustolovic : +1

2. En fait ton tableau, s'il y a besoin...., tu le penses mal. Il faut le retourner (-90°) sans en altérer la lecture. C'est à dire que colonnes deviennent des lignes et les les lignes deviennent des colonnes.

3. Sinon, si tu es obligé de garder cette structure :
3.1. tu vas devoir recréer un tableau (composer de table ou pas @Papy jp : +1) en JS,
3.2. l'insérer dans le dom,
3.3. récupérer les données et les placer dans chaque cellule (comme je te l'indique dans le point 2),
3.4 détecter le screen resize,
3.5.rendre invisible le table patron lorsqu'il y a un point de cassure et afficher le new table.
Modifié par niuxe (02 Mar 2015 - 21:50)
Voici ce que je veux dire:

        .colonne {
                display:inline-block;
                width:300px;
                border:1px solid black;
                margin: 20px;
          }
          .cellule {
                white-space:nowrap;
                width:100%;
                text-align-center;
            }



<div class="colonne" id="colonne1">
            <div class="cellule">Colonne 1 ligne 1</div>
            <div class="cellule">Colonne 1 ligne 2</div>
            <div class="cellule">Colonne 1 ligne 3</div>
            <div class="cellule">Colonne 1 ligne 4</div>
            <div class="cellule">Colonne 1 ligne 5</div>
            <div class="cellule">Colonne 1 ligne 6</div>
        </div>
        <div class="colonne" id="colonne2">
            <div class="cellule">Colonne 2 ligne 1</div>
            <div class="cellule">Colonne 2 ligne 2</div>
            <div class="cellule">Colonne 2 ligne 3</div>
            <div class="cellule">Colonne 2 ligne 4</div>
            <div class="cellule">Colonne 2 ligne 5</div>
            <div class="cellule">Colonne 2 ligne 6</div>
        </div>
        <div class="colonne" id="colonne3">
            <div class="cellule">Colonne 3 ligne 1</div>
            <div class="cellule">Colonne 3 ligne 2</div>
            <div class="cellule">Colonne 3 ligne 3</div>
            <div class="cellule">Colonne 3 ligne 4</div>
            <div class="cellule">Colonne 3 ligne 5</div>
            <div class="cellule">Colonne 3 ligne 6</div>
        </div>

Régler la largeur de la classe "colonne" en fonction de ce que vous voulez voir selon les largeurs d'écran, éventuellement la modifier selon la largeur d'écran par @media queries pour obtenir l'effet désiré.
Est-ce clair?
Modifié par PapyJP (03 Mar 2015 - 15:34)
Merci j'ai finalement pris la solution de facilité avec l'utilisation de div pour faire les colonnes.
Un simple media query et ce fut réglé.
Merci à tous de l’intérêt porté à mon problème.
Bonjour,

J'ai exactement le même problème que toi gaeldupont44, avec un tableau avec :

Ligne 1 colonne 1 : photo
Ligne 1 colonne 2 : photo
Ligne 2 colonne 1 : texte
Ligne 2 colonne 2 : texte

J'aimerai que pour les smartphones cela s'affiche ainsi :

Ligne 1 colonne 1 : photo
Ligne 2 colonne 1 : texte
Ligne 1 colonne 2 : photo
Ligne 2 colonne 2 : texte

Je n'ai pas très bien compris comment tu t'en es sorti, pourrais-tu être plus précis stp ?

Voici ce que j'ai actuellement comme code sur ma page 
<table width="965">
<tbody>
<tr>
<td><a href=""><img class="" src="" alt="" width="470" height="321" /></a>
blalblabla</td>
<td><a href=".jpg"><img class=" " src="" alt="="470" height="321" /></a>
blablabla
</tr>
<tr>
<td><a href=""><img class="" src="" alt="" width="470" height="321" /></a>
blalblabla</td>
<td><a href=".jpg"><img class=" " src="" alt="="470" height="321" /></a>
blablabla</td>
</tr>
</tbody>
</table>


Je ne sais pas ce que je dois mettre exactement dans mon CSS

J'ai par exemple essayé solution proposé plus haut mais cela ne change rien :
[code=css]@media screen and (min-width: 640px) {
.table {
display:block;
}
}[/code

Merci par avance pour ton / votre aide !
je n'ai pas utilisé de table mais des divs.
<div id="colonne1"><img photo 1 />
<span>TEXT1</span></div>
<div id="colonne2"><img photo 2 />
<span>TEXT2</span></div>

Exemple de css
#colonne1 {
position: absolute;
left: 0;
width: 50%;
}
#colonne2 {
position: absolute;
left: 50%;
width: 50%;
}

@media screen and (max-width: 1135px)
{
#colonne1, #colonne2{
position: relative;
width: 100%;
left: 0;
}

}
Voila j'espère avoir a peu près répondu a ton soucis.
Modifié par gaeldupont44 (12 Mar 2015 - 17:04)
Merci d'avoir pris le temps de me répondre.

J'ai essayé avec ta solution, mais même avant de rajouter le media queries ça me met le chaos dans la mise en page pour le coup (photo 1 et 2 pas alignées, texte qui part en vrille partout.

Tant pis, je vais essayer de trouver une autre solution
Sujet clos
Aller à