Tableau responsive 4 colonnes
Résolu
rem_s
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
rem_s Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
rem_s Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
Je bloque sur un problème que voici :
J'ai un tableau de 4 colonnes et 3 rangées dans lesquelles s'affichent des données (chaque donnée dans chaque cellule n'a aucune relation les unes aux autres). Dans l'idéal, j'aimerais rendre ce tableau "responsive" :
- avec @media only screen and (min-width: 1024px) : il s'affiche normalement sur 4 colonnes.
- avec @media screen and (min-width: 500px) and (max-width: 1024px) : il s'affiche sur 2 colonnes / 6 rangées.
- avec @media screen and (max-width: 500px) : il s'affiche sur 1 seule colonne / 12 rangées.
Mon tableau actuel est sous forme :
Je ne sais pas vraiment comment m'y prendre et j'ai beau cherché, je ne trouve rien (je suis peut-être trop gourmand?)
Comment puis-je m'y prendre ?
Merci par avance
EDIT : Ajout du langage dans les balises de code
Je bloque sur un problème que voici :
J'ai un tableau de 4 colonnes et 3 rangées dans lesquelles s'affichent des données (chaque donnée dans chaque cellule n'a aucune relation les unes aux autres). Dans l'idéal, j'aimerais rendre ce tableau "responsive" :
- avec @media only screen and (min-width: 1024px) : il s'affiche normalement sur 4 colonnes.
- avec @media screen and (min-width: 500px) and (max-width: 1024px) : il s'affiche sur 2 colonnes / 6 rangées.
- avec @media screen and (max-width: 500px) : il s'affiche sur 1 seule colonne / 12 rangées.
Mon tableau actuel est sous forme :
<table>
<tbody>
<tr>
<td>cel 1</td>
<td>cel 2</td>
<td>cel 3</td>
<td>cel 4</td>
</tr>
<tr>
<td>cel 5</td>
<td>cel 6</td>
<td>cel 7</td>
<td>cel 8</td>
</tr>
<tr>
<td>cel 9</td>
<td>cel 10</td>
<td>cel 11</td>
<td>cel 12</td>
</tr>
</tbody>
</table>
Je ne sais pas vraiment comment m'y prendre et j'ai beau cherché, je ne trouve rien (je suis peut-être trop gourmand?)
Comment puis-je m'y prendre ?
Merci par avance
EDIT : Ajout du langage dans les balises de code
A voir également:
- Css 2 colonnes responsive
- Faire 2 colonnes sur word - Guide
- Supercopier 2 - Télécharger - Gestion de fichiers
- Classer par ordre alphabétique excel plusieurs colonnes - Guide
- Inverser 2 colonnes excel - Guide
- Excel fusionner 2 colonnes nom prénom - Guide
3 réponses
Bonjour,
De mon point de vue... un TABLEAU (html) contient des LIGNES avec des cellules dedans (ce qui correspond à tes colonnes....) .. il n'est pas possible de modifier ta TR pour en faire 2 en fonction de la taille de la fenêtre ( enfin si .. c'est possible ...mais compliqué pour pas grand chose...)
L'idéal je pense, serait plutôt de remplacer ton tableau par des DIV ...(ou du moins tes TD (en faisant une grande cellule dans laquelle tu mettrais tes div)
ainsi ... en fonction de la taille de ton écran.. tu peux définir des largeurs à tes div et (en jouant avec le display (blocks .. inline...) les positionner côte à côté ou en dessous selon tes besoins...
De mon point de vue... un TABLEAU (html) contient des LIGNES avec des cellules dedans (ce qui correspond à tes colonnes....) .. il n'est pas possible de modifier ta TR pour en faire 2 en fonction de la taille de la fenêtre ( enfin si .. c'est possible ...mais compliqué pour pas grand chose...)
L'idéal je pense, serait plutôt de remplacer ton tableau par des DIV ...(ou du moins tes TD (en faisant une grande cellule dans laquelle tu mettrais tes div)
ainsi ... en fonction de la taille de ton écran.. tu peux définir des largeurs à tes div et (en jouant avec le display (blocks .. inline...) les positionner côte à côté ou en dessous selon tes besoins...
Bonjour
comme tes données n'ont pas de relations entre elle ce ne sont pas des données tabulaires
il faut donc utiliser des div avec display: inline-block
tu mets ces div dans une div parent
ensuite suivant les media-query tu mets des width en % et des max-width et ou min-width en px pour .donnees
enfin pense que tu si a un (min-width: 1024px) le suivant doit être (max-width: 1023px)
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
comme tes données n'ont pas de relations entre elle ce ne sont pas des données tabulaires
il faut donc utiliser des div avec display: inline-block
tu mets ces div dans une div parent
<div id="parent">
<div class="donnees"></div>
<div class="donnees"></div>
<div class="donnees"></div>
<div class="donnees"></div>
etc ....
</div>
#parent {
font-size:0; /**pour éviter le withe-space**/
text-align:center; /**pour centrer les div donnees**/
}
.donnees {
display:inline-block;
font-size: ce que tu veux;
text-align:ce que tu veux;
}
ensuite suivant les media-query tu mets des width en % et des max-width et ou min-width en px pour .donnees
enfin pense que tu si a un (min-width: 1024px) le suivant doit être (max-width: 1023px)
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
Grand merci jordane45 et animostab pour vos réponses rapides.
Je m'entêtais bêtement à vouloir appliquer les principes d'un tableau de base alors qu'avec des div, c'est plus simple et plus clair. Je me suis donc tourné vers cette solution mais j'ai abandonné l'idée de mettre le tableau sur 2 colonnes / 6 rangées pour une résolution intermédiaire (je galère avec le positionnement des div...)
J'ai procédé comme suit :
- le html :
- le css :
Le tableau s'affiche correctement sur 4 colonnes / 3 rangées pour toute résolution supérieure à 750px, en dessous de 750px, chaque div (cellule de données) est l'une en dessous de l'autre. Ce qui me convient.
Le seul ic est que je n'arrive pas à coller un espacement de 5px entre chaque div horizontalement certainement dû au display: table-cell;
Je marque le sujet comme résolu, mais suis quand même preneur d'autres solutions ;)
Je m'entêtais bêtement à vouloir appliquer les principes d'un tableau de base alors qu'avec des div, c'est plus simple et plus clair. Je me suis donc tourné vers cette solution mais j'ai abandonné l'idée de mettre le tableau sur 2 colonnes / 6 rangées pour une résolution intermédiaire (je galère avec le positionnement des div...)
J'ai procédé comme suit :
- le html :
<div class="row">
<div class="col">données</div>
<div class="col">données</div>
<div class="col">données</div>
<div class="col">données</div>
</div>
<div class="row">
<div class="col">données</div>
<div class="col">données</div>
<div class="col">données</div>
<div class="col">données</div>
</div>
<div class="row">
<div class="col">données</div>
<div class="col">données</div>
<div class="col">données</div>
<div class="col">données</div>
</div>
- le css :
.row {
width: 100%;
display: table;
table-layout: fixed;
text-align: center;
margin-bottom: 5px;
}
.col {
display: table-cell;
padding:0 10px;
border: 2px solid #a1a1a1;
border-radius: 25px;
}
@media (max-width: 750px) {
.col {
display: inline-block;
margin-bottom:5px;
width: 95% !important;
padding:10px 10px 10px 10px;
text-align: center;
font-size:16px;
border: 2px solid #a1a1a1;
border-radius: 25px;
}
}
Le tableau s'affiche correctement sur 4 colonnes / 3 rangées pour toute résolution supérieure à 750px, en dessous de 750px, chaque div (cellule de données) est l'une en dessous de l'autre. Ce qui me convient.
Le seul ic est que je n'arrive pas à coller un espacement de 5px entre chaque div horizontalement certainement dû au display: table-cell;
Je marque le sujet comme résolu, mais suis quand même preneur d'autres solutions ;)